TinyPortal

General => Chit chat => Topic started by: Skb on December 10, 2017, 07:09:26 AM

Title: Site Improvement
Post by: Skb on December 10, 2017, 07:09:26 AM
First, a little background please. I booked our domain and built our website in March of 2016. I had earlier built a couple of websites with MS-Publisher. By the time I got down to developing The Diabetic Pub, Publisher has stopped it's plugin for web page development. This time around I built the website using OpenElement, which is very 'drag & drop' and easy to use open source s/w.

After this, I looked for forum s/w and settled in with SMF. Bit by bit I've added functionality as required by the Team and members. We use the default Curve theme. Until then, I knew nothing of Portals and their compatibility with forum s/w. By the time I installed TP, the website was well settled and there was little point in disturbing the arrangement. I therefore use TP only for the right panel with a few blocks in it. But the truth is that the website & the forum are mismatched visually, both being based upon different s/w.

With some basic skills in place, I think I am now ready to use TP fully and port the website content into a Frontpage with the Article system. Right now the forum is placed in the website/forum folder. Once both are integrated I can do away with this arrangement and just have the one URL. I might need to switch from the Curve theme to a slightly better variant so long as all the mods (32 of them) are supported. I am looking forward to some advice, suggestions & help in how to go about doing this. 

For starters, can someone explain what is the difference between frontpanel & frontpage ?

Thanks for your patience.
Title: Re: Site Improvement
Post by: lurkalot on December 10, 2017, 11:48:16 AM
Hi Skb

Ok, lets start with your question

"For starters, can someone explain what is the difference between frontpanel & frontpage ?"

Front Page:  If for example you only have SMF installed and then added TP the Home button would take you to the Portal home page, this is basically a blank canvas waiting for you to add blocks and content. The forum button would take you to the forum.

Frontpanel:  The front panel is a panel just like the other panels L/R/Upper/Lower/top/bottom.  The difference being that anything added to a frontpanel will only display on the front page of the portal, and can't be displayed anywhere else.  The other panels can be displayed anywhere including the front page.

So basically the front panel is ideal for doing what you need, and if you can do a little html magic you should be able to produce another nice looking front page to replace your existing one right there in a font page block.

I noticed you said  "port the website content into a Frontpage with the Article system" If it was me I'd use a block(or two) rather than a article to do this. 

Not a great example, but if you look at the home page here, this is made up using three or four blocks, (except for the example blocks). The only reason I used 3-4 blocks was for ease of editing, so if I make a mistake I don't screw the whole page up.

Hope some of this info was helpful.

Title: Re: Site Improvement
Post by: Skhilled on December 11, 2017, 04:28:11 PM
Ok, are you asking how to make Curves look like your pages? Or how to make TP articles look like your pages?

If you want your TP articles to looks like your current articles, right-click on an article and select "View Source". Then select everything within the body tags, paste it into a html article and see if that gets you close to where you want to be. Then adjust the code as necessary.

You can also adjust the coding for Curves  to at least match the colors of your current articles. I highly suggest you do not use the original Curves theme but make a copy of it and edit that one as well as rename it. More work would need to be done to match the look of the articles.
Title: Re: Site Improvement
Post by: Skb on December 12, 2017, 10:26:15 AM
Thanks for your replies.

Mick,

Yes. The idea is use both the Home & Forum buttons in the Main Menu & the Linktree. I'm still not sure what is the difference between the Panel & the Page. Eventually, we do want a page, where the user would land post login. The forum would remain in the background and would be accessible by the above buttons.

As of now our forum has 14 articles, which I'd like to bring to the FP, only there wouldn't be enough space to put them all there. I could use the "Intro" feature to have a short description, but even with that I'd prefer a random selection of 5-6 articles to be shown on the FP.

I'm a little familiar with html tags and design would be something that I'd look at, after I've accomplished the above.

Skhilled,

I would like to look at curve alternates which would then be applied to the forum as well. I could try the copy/paste methods you recommend but I don't think that using all the elements from the website pages would sit pretty on the forum frontpage. But thanks for your siggestion, I will certainly play around a bit and see where I end up.
Title: Re: Site Improvement
Post by: Skhilled on December 12, 2017, 02:11:43 PM
Simply put, you have left and right panels which hold the blocks on the and right, respectively. Frontpanel blocks show in the center of the Frontpage (also called the Home page).

Click my sig. The blocks you see in the middle of the frontpage (home page) are frontpage blocks and are only shown on the frontpage. I hope that helps you to understand it better. :)
Title: Re: Site Improvement
Post by: Skb on December 13, 2017, 03:17:56 AM
Thanks, that helped in understanding the roles & placement.

Like I said, I have 14 articles at present, which number is likely to go up if I invite members to contribute. If I use the front panel to display one article at any given time, is there a way to randomly select one article every time the Home page is displayed.
Title: Re: Site Improvement
Post by: Skhilled on December 13, 2017, 04:15:59 PM
Hmmm, can't remember there being a way to randomize it. However, there I believe there's a way to set articles to show by a specific date...like from feb 10th to mar 7th., etc. IO'd need to do a little research but there is either a setting for it or custom coding here on this site that may do that.
Title: Re: Site Improvement
Post by: Skb on December 14, 2017, 03:03:45 AM
I couldn't find any random selection in the settings. I will search for a code snippet to do that, if possible.
Title: Re: Site Improvement
Post by: lurkalot on December 14, 2017, 06:50:54 AM
Not sure if this one works, https://www.tinyportal.net/index.php?topic=34902.msg278894#msg278894

Unfortunately a lot of the snippets need updating, but I don't have the skills to do this myself.
Title: Re: Site Improvement
Post by: Skhilled on December 14, 2017, 03:01:15 PM
Ah! I do remember that topic now! I've never used it myself. But, if I have a little extra time this weekend I'll give it a shot and what happens on a test forum.
Title: Re: Site Improvement
Post by: Skb on December 18, 2017, 09:48:52 AM
I've started work on the Front Panel. I'm copying some of the content into html/JS blocks.
Is it possible to use frame/title styles from a different theme for the front panel. The forum uses default Curve.

If I try to change background using the <style> tags, it doesn't accept that.
Title: Re: Site Improvement
Post by: Skhilled on December 19, 2017, 02:00:46 PM
I believe so but you would probably have to upload the images to the current theme you are using. If you plan on modifying Curves I highly suggest that you make a copy of it and modify the copy and rename it. When you install mods that will always look for specific things from Curves, images and coding. If you modify the original the mods may not work as intended or at all.
Title: Re: Site Improvement
Post by: lurkalot on December 19, 2017, 10:22:50 PM
Yep, as Skhilled suggested, you can make a copy of the default theme and play around with the images and css in that. 

Start by modifying the colours of the main_block.png image which I believe is what the frame title styles are using from the default theme. Or grab one from a different coloured theme if you can find one.

You will also need to change the css to roughly match those colours to make thing look good while page is loading etc. Best way to see what you're doing there is to temporarily rename the images folder so all you see is the css colours.  When done put the images back as they were.

Example below.
Title: Re: Site Improvement
Post by: Skhilled on December 20, 2017, 02:40:40 PM
Exactly! I thought it was main_block.png but I haven't messed with it in awhile. I was going to look it up but was a tad busy and was going to do it today.

If you look at the images in the /Themes/default/images/theme folder you'll find it. There are other images in various folders. Just right-click on any image you wish to change and select "Inspect" to find out which image it is and where. ;)
Title: Re: Site Improvement
Post by: Skb on December 21, 2017, 11:09:21 AM
Quote from: Skb on December 18, 2017, 09:48:52 AM
Is it possible to use frame/title styles from a different theme for the front panel. The forum uses default Curve.

Maybe I should rephrase the question.
Is it possible to use frame/title styles from a different theme for the front panel/page, while the forum uses default Curve. Just asking, though from what I've seen it doesn't seem likely.
Title: Re: Site Improvement
Post by: Skhilled on December 21, 2017, 02:26:20 PM
Hmmm, interesting and I've never tried doing it. But, I'd try create a html/php page and use blocks with no frames or titles. Then I'd place images of the frames/titles over the blocks.

At least, that's how I'd start. I'm not sure if there is a better way without some trial and error unless someone else knows of a better way.
Title: Re: Site Improvement
Post by: Skb on December 22, 2017, 02:50:55 AM
Yes, that should be the workaround.

Off to honing my HTML skills.
Title: Re: Site Improvement
Post by: Skhilled on December 22, 2017, 02:25:02 PM
Ok, keep us posted. I'd like to know if this works. :)
Title: Re: Site Improvement
Post by: Skb on December 23, 2017, 11:55:21 AM
Sure. Have a look. I've put up a basic Front Page. I'd welcome comments & suggestions. With time, more improvements will come.

With the current setup one problem that has surfaced is that the picture is causing loss of responsiveness, at least in portrait mode while being browsed on phones.
Title: Re: Site Improvement
Post by: lurkalot on December 23, 2017, 12:56:46 PM
skb, Instead of using a image, perhaps just use code.  Just a real dirty example, code is probably completely wrong, but it'll give you an idea,

This for example,
<div style="background-color:#780D1F; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Will give you this,

Hello SKB!



If you want to round off the corners,
<div style="background-color:#780D1F; border-radius: 5px; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Hello SKB!



<div style="background-color:#780D1F; border-radius: 5px 50px; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Hello SKB!



<div style="background-color:#780D1F; border-radius: 50px 5px; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Hello SKB!



<div style="background-color:#780D1F; border-radius: 50px 50px; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Hello SKB!



0r a different radius on each corner,
<div style="background-color:#780D1F; border-top-left-radius: 8px; border-top-right-radius: 15px; border-bottom-right-radius: 40px; border-bottom-left-radius: 18px; text-align:center; vertical-align: middle; padding:18px;"><h1><font color="white">Hello SKB!</font></h1></div>

Hello SKB!



Something else for you to experiment with.  ;)
Title: Re: Site Improvement
Post by: Skhilled on December 23, 2017, 03:42:11 PM
Mick, my original thought were to use CSS but then thought what I posted may be a better way to start off then go from there. But your way is much better! And that's what I need to learn to play with myself. Thanks for posting that.

skb, looking good so far. But like I said, create a new theme based on Curves. Then you can easily change all of the block on the right to match the frontpage and even the catbg's for the forum theme itself.


I always tell people to create a test forum that is an exact duplicate of your live forum to play with. Once you get it right then add your changes to your live forum. This way if you make mistakes and delete something important or even bring the site down in some way it is only the test forum and will not inconvenience your users.
Title: Re: Site Improvement
Post by: lurkalot on December 23, 2017, 04:52:54 PM
Steve, I haven't a clue which way is best tbh, I just thought I'd add another option into the mix, and had a bit of fun experimenting at the same time. lol..  I'm not exactly sure how skb implemented those changes either so this might not be a usable option. 

Got a few days off work now, so might well try and play with some of these ideas myself.  8) 
Title: Re: Site Improvement
Post by: Skb on December 24, 2017, 02:04:34 AM
Mick,

I tried the rounded title bars, bur gave up because it didn't go well with the main text boxes below.
There is an image of a Pub that I've inserted which is giving me problems with responsiveness. I might need to edit it into something with lesser width or do away with it completely.

Skhilled, Developing a Curve variant will require a lot of time which I won't be able to devote as of now.
Besides, you've been at our forum and know the mindset of the people there. I have to keep all changes minimal.
I'll do it in a gradual manner. The idea was to push the Home page in somehow which I've done.
The rest, in good time.

ETA: I've taken your cue and used colors from Curve theme, to merge well with the rest of the page.
Title: Re: Site Improvement
Post by: lurkalot on December 24, 2017, 10:14:54 AM
skb, Just out of interest, where, how, and how did you edit the files to change those headers?  I'd like to experiment with this idea on my test site. 
Title: Re: Site Improvement
Post by: Skb on December 24, 2017, 11:10:03 AM
I used a free color-picker tool to choose the colors from the Curve theme, and I created this <div>

<div style="background-color: #3B6181; padding-top:3px; padding-bottom: 3px; "><strong>
<p style="color: #fff; text-align: center;">About Us</p></strong>
</div>


Choose Do not use title/frame styles in settings
Title: Re: Site Improvement
Post by: Skb on December 27, 2017, 02:19:41 AM
This may be quite helpful in developing Curve variants;

http://www.simplemachines.org/community/index.php?topic=349582.0
Title: Re: Site Improvement
Post by: lurkalot on December 27, 2017, 07:17:39 PM
Quote from: Skb on December 27, 2017, 02:19:41 AM
This may be quite helpful in developing Curve variants;

http://www.simplemachines.org/community/index.php?topic=349582.0

Thanks, I agree.  Shame the images are missing though. 

Actually It's the same tutorial that was added to the wiki https://wiki.simplemachines.org/smf/How_to_create_a_smf_theme