TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 05:43:11 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,105
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 334
  • Total: 335
  • @rjen

Site Improvement

Started by Skb, December 10, 2017, 07:09:26 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skb

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.

SMF 2.1 RC4 (default theme) / TP 2.1.0

Skhilled

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.

lurkalot

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.

Skhilled

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. ;)

Skb

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.

SMF 2.1 RC4 (default theme) / TP 2.1.0

Skhilled

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.

Skb

Yes, that should be the workaround.

Off to honing my HTML skills.

SMF 2.1 RC4 (default theme) / TP 2.1.0

Skhilled

Ok, keep us posted. I'd like to know if this works. :)

Skb

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.

SMF 2.1 RC4 (default theme) / TP 2.1.0

lurkalot

#19
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.  ;)