News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Framing the whole thing (CSS)?

Started by Grammy, January 18, 2021, 08:27:26 AM

Previous topic - Next topic

Grammy

2.0.17, Default

You guys see "the whole thing"?  The entire forum, here, everything but the background (backdrop.png)?  It's all wrapped in this very thin border.  I'm guessing that it all lives in index.css but which block of code controls the exterior border wrap about the entire forum?  'Cause I have to mess with it.  I just have to.   O:)

Antes

well, 2.0 is bit old and its not exactly a border, but more like background images... (since when 2.0 created there was no proper CSS :P) - people had to do images with curves so you can actually have curved themes (unlike today we just use border-radius).

You have to mess with main_block.png unless you go for rewrite the small parts of the main template (you can take a look at my 2.0 themes)...

Grammy

Quote from: Antes on January 18, 2021, 08:35:07 AM
well, 2.0 is bit old and its not exactly a border, but more like background images... (since when 2.0 created there was no proper CSS :P) - people had to do images with curves so you can actually have curved themes (unlike today we just use border-radius).

You have to mess with main_block.png unless you go for rewrite the small parts of the main template (you can take a look at my 2.0 themes)...

Oh, it's an image, not a border-radius, then?  Phooey.  I mean, I'm willing to fire up GIMP and see what I can do, but I was SO hoping it was just a code tweak. 

But just between you and me...   main_block.png has always hated me.   :D

Grammy

#3
Weirdness though...  I just opened up main_block.png and I can't see a border around it or on the sides... 

I need to go soak my head in coffee.   :-\


Dropping back by to ask...  do you think it might work to create a div that surrounds the wrapper and give that a border?  If so, edit index.template.php?

Grammy

Found it:

index.css

div#wrapper

(Just mucking about with a solid border;  it's all Fritos and milk from here!)   :D

Antes

Well, wrapper contains footer as well so unless you want a border all around... yea, you should use div#wrapper... other than that, you should do some border work on #header & #content_section.

I'd love to see the end result of this full-border work...


Grammy

Quote from: Antes on January 18, 2021, 10:49:55 AM
Well, wrapper contains footer as well so unless you want a border all around... yea, you should use div#wrapper... other than that, you should do some border work on #header & #content_section.

I'd love to see the end result of this full-border work...

Well, it's just another one of those "practice forums" where I break stuff, so it looks pretty awful, but here ya go.   :D
(Still trying to figure out why SimplePortal insists on being outside the wrapper when everyone else plays inside, but what are ya gonna do?)

Antes


Grammy


Grammy

I'm dangerous, ha!!  This is awesome, thanks!

shadav

depending on your browser, you should be able to right click the area you are wanting to edit and then click on inspect

it will show you what parts to edit and you can play with it before actually doing the edits on your files to see how it will look first, just refresh the page to set it back to normal.

I usually get rid of all the background images and just use css

Grammy

Quote from: shadav on January 18, 2021, 02:00:43 PM
depending on your browser, you should be able to right click the area you are wanting to edit and then click on inspect

it will show you what parts to edit and you can play with it before actually doing the edits on your files to see how it will look first, just refresh the page to set it back to normal.

I usually get rid of all the background images and just use css

I've been playing around with "Brave" browser this past week and its inspection features aren't the best.  I guess I'll have to use Firefox to really "get in there".   :)

Antes

I did all my on-spot edits with Firefox till new Edge... and switched all my eco-system to new Edge.

I suggest going for more blue-ish colors and be brave to edit template - default template is not enough to achieve something with "just" CSS... also I'll drop you another site for background images: https://coolbackgrounds.io/

At first theme, it takes quite a lot of time to remove old code and adapt to new one, but once you do that... your theme becomes insanely flexible :)

Kindred

both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Antes on January 18, 2021, 03:14:50 PM
I did all my on-spot edits with Firefox till new Edge... and switched all my eco-system to new Edge.

I suggest going for more blue-ish colors and be brave to edit template - default template is not enough to achieve something with "just" CSS... also I'll drop you another site for background images: https://coolbackgrounds.io/

At first theme, it takes quite a lot of time to remove old code and adapt to new one, but once you do that... your theme becomes insanely flexible :)

Well, they do say that blue is not only easy on the eyes but it actually creates better vision.  (That may be redundant, ha.)
Wow, great site, thanks!  I could muck around in that all day.   :D

Grammy

Quote from: Kindred on January 18, 2021, 03:15:57 PM
both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/


Wait, what?  Those are pure CSS?   :o

shadav

I'm not the best examples but  :P
there is a lot you can do with css
https://adserver.business/test/smf/

even changing font colors ;)
https://adserver.business/test/smf21/

Grammy

Quote from: shadav on January 18, 2021, 03:31:58 PM
I'm not the best examples but  :P
there is a lot you can do with css
https://adserver.business/test/smf/

even changing font colors ;)
https://adserver.business/test/smf21/


The CSS isn't loading for me but that may just be this new browser I'm trying, so I'll look again on another one. 

(Staring at shadav's sig and secretly wondering if any of the squirrels currently robbing my birdfeeders are "foamy"...)   :o

Kindred

Quote from: Grammy on January 18, 2021, 03:21:21 PM
Quote from: Kindred on January 18, 2021, 03:15:57 PM
both Antechnius and myself have redone themes in pure CSS without the images.
I modified the Stuiod003 theme from bloc http://fx-sabers.com/forum/
and
Antechinus modified the curve (aka default) theme. https://test.turtleshellprod.com/


Wait, what?  Those are pure CSS?   :o

with the exception of the background and the header/logo, on the fx-sabers one yes -- for Antechinus' one on my test site, the on/on2/off are images still, but simple to replace with a Fafa icon

it gets even easier in 2.1
https://test2.turtleshellprod.com/ is my working site to remake the fx-sabers theme in 2.1 -- and has had ONLY CSS changes from the curve2 default except for 2 template files with really minor changes.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Kindred on January 18, 2021, 04:08:23 PM
with the exception of the background and the header/logo, on the fx-sabers one yes -- for Antechinus' one on my test site, the on/on2/off are images still, but simple to replace with a Fafa icon

it gets even easier in 2.1
https://test2.turtleshellprod.com/ is my working site to remake the fx-sabers theme in 2.1 -- and has had ONLY CSS changes from the curve2 default except for 2 template files with really minor changes.

Oh, that last one is scary good.  CSS is probably the most fascinating part of site coding (to me, anyway) but I'm such a rookie (hack).  You guys make me dizzy.


Advertisement: