A couple of quick style modification questions...

[aikidesi]

I'm not familiar with CSS, having always used a wysiwyg html editor for websites... I'd like to make some changes to the style and could use some direction on how to begin and where to look in the style sheets...
My site is www.topnjbands.com and here are a couple of the initial changes I'd like to make...
1) Center the TopNJBands logo on the page
2) Change the site's background to black and change the text color (probably to white or some color that will show up well on a black background).
3) Remove the Ranking Method on the left hand side.
4) Add another column to the right of the page so that the members column is in the center.
5) Is it possible to have the number of votes, both Today & Average, on the entries rather than requiring a click on Stats?
That's it for now... there's other stuff I'd like to do but this will give me a good head start and, with luck, help me start figuring it out myself.
Thank you,
Frank

 

[aikidesi]

I know that was probably a lot of questions so, if someone can just point me in the right direction to center the logo, that will be a great start.

I'm sure that once I understand the whole CSS setup, I may see why it makes sense but, at the moment, it just seem incredibly confusing and convoluted. For example, I wanted to change the "Your Site Here" text. I did a find for that string and found only one reference that was even close ({$lng->table_your_site_here}), in a file called table_filler.html.

Since that's not exactly what displays on the site, I assumed it was a reference to the actual text but couldn't find it in any of the files on the site. Just to see what would happen, I deleted the string and just replaced it with the text I wanted (Don't miss out! Add your site now!) and, to my surprise, it worked!

But why? Where should I have gone to update that phrase?

 

[Mark]

everything is done in user.css, look at screen.css and copy the parts you want to change into user.css

that way, you wont overwrite all of your edits with each version upgrade.

1) Your going to need to know very basic HTML/CSS to accomplish this. You will likely want to edit wrapper.html and add your own rules to user.css
I dont have time at the moment to write a complete walkthrough but if you have trouble with it post back and let me know.

2) look at screen.css this is where all colors are set. Copy the parts you want to change into user.css

3) open wrapper template and remove it.

4) again this will require very basic HTML/CSS knowledge, but its again beyond the scope of this topic for me to write a complete detailed walkthrough.

5) Yes, its possible and has been asked and answered several times throughout this forum already. But the most useful answer is: You can paste any tags you like from the stats template into your table_top_row and table_row templates to show any stats you like. {$today} and {$average} still work in these templates as well.

How to change the text "Your Site Here" (and all other language definitions):

Go to admin -> content -> manage languages and search for "Your Site Here". Then you can edit it right there to whatever you like.

 

[Mark]

I will check back asap and write more details instructions how to center your logo if needed

 

[autosurf]

For center your logo, you can remplace in screen.css, the balise logo by

#logo {
height: 1px;
}

You can try many possibility with use developpement kit (integrated in your browser) in chrome or firefox

 

[aikidesi]

Mark - thanks for your response... ok, I see the point about using CSS so as not to lose my updates when upgrades become available. I reverted the Your Text Here to the $lng string that was originally there and then successfully used the control panel to change the message. Thank you for that tip!

What did not work, however, was modifying the user.css to center the logo... here's what I added to user.css...
#logo {
text-align: center;
width: 400px;
float:center;
}

 

[Basti]

This is what you are after

#logo {
text-align: center;
width: 400px;
float: none;
 
margin: 0 auto;
}

 

[aikidesi]

That worked; thank you!