News: TinyPortal Release Schedule. Please read this update for More Info.

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

October 14, 2019, 09:14:30 AM

Login with username, password and session length

Recent

Members
  • Total Members: 3756
  • Latest: Ocean
Stats
  • Total Posts: 189079
  • Total Topics: 20763
  • Online Today: 70
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 1
Guests: 43
Total: 44

Author Topic: Site Improvement  (Read 5019 times)

0 Members and 1 Guest are viewing this topic.

Offline Skb

  • Full Member
  • ***
  • Posts: 102
    • Metabolically Challenged
Re: Site Improvement
« Reply #10 on: December 18, 2017, 02: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.
www.diabetic.pub/forum
because every diabetic needs help.
SMF 2.1 RC1 / TP 1.6.2

Offline Skhilled

  • Beta Tester
  • *
  • Posts: 1166
  • Once you stop learning, you stop living!
    • Doc Skillz
Re: Site Improvement
« Reply #11 on: December 19, 2017, 07:00:46 AM »
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.

Reading can seriously damage your ignorance!

Online lurkalot

  • Administrator
  • *
  • Posts: 6287
    • Camera Craniums
Re: Site Improvement
« Reply #12 on: December 19, 2017, 03: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.

Offline Skhilled

  • Beta Tester
  • *
  • Posts: 1166
  • Once you stop learning, you stop living!
    • Doc Skillz
Re: Site Improvement
« Reply #13 on: December 20, 2017, 07:40:40 AM »
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. ;)

Reading can seriously damage your ignorance!

Offline Skb

  • Full Member
  • ***
  • Posts: 102
    • Metabolically Challenged
Re: Site Improvement
« Reply #14 on: December 21, 2017, 04:09:21 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.
www.diabetic.pub/forum
because every diabetic needs help.
SMF 2.1 RC1 / TP 1.6.2

Offline Skhilled

  • Beta Tester
  • *
  • Posts: 1166
  • Once you stop learning, you stop living!
    • Doc Skillz
Re: Site Improvement
« Reply #15 on: December 21, 2017, 07:26:20 AM »
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.

Reading can seriously damage your ignorance!

Offline Skb

  • Full Member
  • ***
  • Posts: 102
    • Metabolically Challenged
Re: Site Improvement
« Reply #16 on: December 21, 2017, 07:50:55 PM »
Yes, that should be the workaround.

Off to honing my HTML skills.
www.diabetic.pub/forum
because every diabetic needs help.
SMF 2.1 RC1 / TP 1.6.2

Offline Skhilled

  • Beta Tester
  • *
  • Posts: 1166
  • Once you stop learning, you stop living!
    • Doc Skillz
Re: Site Improvement
« Reply #17 on: December 22, 2017, 07:25:02 AM »
Ok, keep us posted. I'd like to know if this works. :)

Reading can seriously damage your ignorance!

Offline Skb

  • Full Member
  • ***
  • Posts: 102
    • Metabolically Challenged
Re: Site Improvement
« Reply #18 on: December 23, 2017, 04: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.
www.diabetic.pub/forum
because every diabetic needs help.
SMF 2.1 RC1 / TP 1.6.2

Online lurkalot

  • Administrator
  • *
  • Posts: 6287
    • Camera Craniums
Re: Site Improvement
« Reply #19 on: December 23, 2017, 05:56:46 AM »
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,
Code: [Select]
<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,
Code: [Select]
<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!


Code: [Select]
<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!


Code: [Select]
<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!


Code: [Select]
<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,
Code: [Select]
<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.  ;)
« Last Edit: December 23, 2017, 07:27:05 AM by lurkalot »