Need help with styling

Resolved tjprice1
(@tjprice1)

11 years ago

I am wanting to try and add boxes around my content like whats on this website
http://www.trafficgenerationcafe.com/stop-focusing-on-your-audience/

I only want the content, not the sidebars or anything else. But I dont know much about CSS or HTML. Is this an easy thing to accomplish?

The reason why I am wanting to do this is to help separate my content from the theme style.

So far here is what I have come up with

div#content{
background-color: white;
width: 400px;
padding: 25px;
border: .5px solid grey;
margin: 25px;
box-shadow: 0px 19px 5px -15px #888888,
inset 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 19px 5px -15px rgba(136,136,136,1),
inset 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 19px 5px -15px rgba(136,136,136,1),
inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 5px;
}

But this just puts everything on my site into boxes. Incase you need to know how my site is set up the address is fittosurvive.net

Thanks

Viewing 11 replies - 1 through 11 (of 11 total)

Martin Robbins
(@santeven)

11 years ago
Greetings:

To get started you could try something like this:
```
main.content {border: 1px solid gray;}
```
Good Luck!
David_G
(@questas_admin)

10 years, 12 months ago
You could place a div id in your page or post then use the selector you create to style it.
```
<div id="content_box">
Your post or page content here.
</div>
```
then style it:
```
#content_box {
/* Place your css here */
}
```
David_G
(@questas_admin)

10 years, 12 months ago

You can name your div id whatever you want, and you can repeat it so your style will use it where ever you have it.

Thread Starter tjprice1
(@tjprice1)

10 years, 12 months ago

Okay I think what I have looks good now.

Except I want to change the font colors to black and change the links to blue. I have looked in the CSS file but I cannot seem to find the area where I change these.

How do I go about finding them?

Thanks everyone.

Martin Robbins
(@santeven)

10 years, 12 months ago

In topic https://wordpress.org/support/topic/change-post-fonts-to-match-website?replies=5 I wrote:

Yes it is possible to modify any of the fonts. In general, you’ll need to learn how to analyze existing css code using browser developer tools. and how to write new custom css code that will take precedence over the existing code. Here is a reference: https://codex.wordpress.org/CSS#CSS_Resources

Browser Developer Tools are inside Firefox and Chrome and perhaps other browsers as well.

David_G
(@questas_admin)

10 years, 12 months ago

You should also check this out for customizing your site.
http://themesandco.com/snippet/firebug-best-spent-6-minutes/
http://getfirebug.com

Then to edit this editor is fantastic. You can edit multiple files at the same time.
http://notepad-plus-plus.org/

And this FTP program is tops in my book.
http://www.coreftp.com/

David_G
(@questas_admin)

10 years, 12 months ago

The best way to make changes like this to a theme is to use a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:
https://codex.wordpress.org/Child_Themes
http://op111.net/53/

Martin Robbins
(@santeven)

10 years, 12 months ago

@questas_admin
For beginners, I think custom css plugins are easier than child themes

David_G
(@questas_admin)

10 years, 12 months ago

@santeven, I agree with you for minor modifications, but even a beginner needs to know WHAT to style, hence my post about firebug and how to use it, and you must agree that the BEST way to customize is by child theme so I provide information on that. If you don’t have the tools, you can’t use them.

Thread Starter tjprice1
(@tjprice1)

10 years, 12 months ago

Thanks for the suggestion. I think I have it all figured out. The firebug tool really helped!

David_G
(@questas_admin)

10 years, 12 months ago

Your very welcome, glad I could help.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Need help with styling’ is closed to new replies.

Need help with styling

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics