WordPress.org

1. CorporatePaladin
   Member
   Posted 11 months ago #

   I'm really new to web design, html, css, and wordpress. I mostly use Dreamweaver and then just mess with the code to get WP templates made. Please bear with me.

   So, I have these two blogs I'm working on right now:
   http://www.thepaulmeyer.com/

   http://www.thegregtaylorblog.com/

   I'm wanting to adjust the size of the entry titles and possibly the little tag section just below the posts. I've done a ton of searching on the internet, although it seems like a lot of what I've found is a little outdated. I've gone into the CSS for the first (Paul Meyer) blog and have tried editing just about anything mentioning h2 or h3, to no avail.

   So, I'm wondering if there's a simpler way, or at least if someone could spell it out a little better for me. I'm just worried that I've been looking in the wrong place, or something in my code is preventing changes or overriding or something.

   If anyone could help me out, it would be incredibly appreciated.

   Thanks.

2. stvwlf
   Member
   Posted 11 months ago #

   The issue you are having is all or most of your styling is inline in the theme templates, using for example
   <h2 style="font-size:22px;">Text Here</h2>

   That is the most inflexible way to apply styling. It is called inline styling, and it overrides any styling found in the stylesheet. You can change the stylesheet all day long and the inline styling will still be applied.

   This is what you don't want to do:
   you can get around that by changing your stylesheet like this
   

   h2 {
     font-size: 18px !important;
   }

   Anything marked with !important overrides EVERYTHING else. The fun begins when you have two stylings that conflict that apply to the same page element, both marked with !important.

   This is what is recommended to do:
   Take your inline styling out of the WordPress templates altogether and move them into the stylesheet. You will have to learn some CSS principles to be successful with that.

   There are rules of prioritization in CSS that determine what happens when more than one styling assignment is made to the same page element.
   80% of the time when styling is not being applied as intended its because it is being overruled by styling coming from another source that has a higher weighting - most of the time, is more specifically applied than the more general styling you are attempting to use.
   (much of the other 20% of the time the issue is misspelled selector names or bad CSS code).

   Applying styles inline in the HTML overrides almost all other assignments, thus is not a good approach, for reasons you are seeing now. (Dreamweaver's default behavior is to apply styling inline.)

   If you are going to work on your own sites the time put into learning some CSS rules will be very valuable over time.

3. CorporatePaladin
   Member
   Posted 11 months ago #

   Hey, thanks a lot for the help. I'm definitely looking into CSS, but yeah, I've realised that Dreamweaver is a little sloppy.

   Although, how would I go about changing the font size for the tags and such on the front page? What would that be under?

4. stvwlf
   Member
   Posted 11 months ago #

   file
   http://www.thepaulmeyer.com/wp-content/w3tc/min/d2775439.edd2a3.css

   line 413
   

   #content .entry-title {
     color: #000000;
     font-size: 21px;
     font-weight: 700;
     line-height: 1.3em;
     margin-bottom: 0;
   }

   Try Firebug, a Firefox addon that shows you what CSS is being applied to what page element, and what line it comes from.

Reply

You must log in to post.