News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Custom background image & category stylings

Started by truckworks, September 15, 2014, 04:28:53 PM

Previous topic - Next topic

truckworks

Hoping someone can either help me out or point me in the right direction. 
 
My end goal here is to have a static background photo that the site essentially scrolls on top of and customized category/board boxes.  I would like to see no rounded corners on any border, basically everything possible makes a 90°.  Some things I would like to have a border separation, others I wouldn't.  Also, depending on the category and/or board, it would have a different background photo.
 
I really don't even know where to begin here, I am essentially completely new to all this.  Should I be going through themes and find something close to what I want and modify from there? I am not scared of getting my hands dirty, I would much rather tackle this head on if possible, but my experience is little-to-zero. 
 
edit: I am using 2.0.8, standard theme that comes with the software, zero modifications so far
Any questions I post are related to 2.0.8.  Thank you all for any help you give me, truly a great community on here!

Chalky

You can drastically reduce the size of the task if you have a look through the themes first for something that comes close. This one, for example, has the squared-off corners you are looking for  http://custom.simplemachines.org/themes/index.php?lemma=2590.   Pretty much any theme can be given a fixed image by changing the background in index.css to use the background:fixed attribute, but i think the trick is in finding a theme where your chosen background looks good without having to rip the whole theme apart.

There's a mod that adds a border separation between posts, if that's any use to you  :)

truckworks

WOOHOO! That is very close to what I was looking for, I'm hoping I can figure out how to modify opacity & block colors on my own.....
Any questions I post are related to 2.0.8.  Thank you all for any help you give me, truly a great community on here!

Chalky

 :D

If you use the "inspect element" option found by right clicking on the area in Firefox or Chrome, you'll see the bit of the CSS you have to play with and you can try changes there to see the effect before you actually edit the file. Theme authors are usually very helpful if you ask specific questions about how to modify the theme on the theme's own support topic :)

truckworks

Oh wow that already looks better.  Now I need to figure out how to do what most of you folks probably consider easy..... change the forum name to a graphic or something. 
Any questions I post are related to 2.0.8.  Thank you all for any help you give me, truly a great community on here!

truckworks

I know you're helping with stuff unrelated to this specific board, so please let me know if I need to move the question elsewhere.  See attached pic for what I'm a little confused with (keep in mind I'm learning HTML as I go). 
 
How do I simply change the size & style of that font? Can I just wrap the text in HTML code that will reformat to the size/bold/italic/etc that I want?
Any questions I post are related to 2.0.8.  Thank you all for any help you give me, truly a great community on here!

mashby

Might be easier to add styles to the class for that thing. Mind providing a link to the page where you took that screenshot from?
Always be a little kinder than necessary.
- James M. Barrie

Hj Ahmad Rasyid Hj Ismail

Yes. Just use css for that. As you can see its css class is stated clearly by element inspection. So use .navigate_section ul li a:link, .navigate_section ul li a:visited {your css code} to change its stylings. Simply add that at the end of the index.css file for the said theme.

truckworks

Thanks to all replies, and especially thanks to mashby.  This is all rather new to me so I'm glad to be pointed in the right direction.
Any questions I post are related to 2.0.8.  Thank you all for any help you give me, truly a great community on here!

Advertisement: