Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   CSS priorities when adding, for instance, widgets in footer.... (http://forum.bytesforall.com/showthread.php?t=19921)

drex Mar 18, 2013 07:17 AM

CSS priorities when adding, for instance, widgets in footer....
 
when I add widgets in footer, as per http://forum.bytesforall.com/showthread.php?t=19079, it works great.

I need to change the color of the text in footer widgets...

I tried various things, the last being in the widgets.css file:

/* FOOTER WIDGET AREAS */
.widgetarea-three {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}


also tried same code as #widgetarea-three in styles.css but in any way it is all overwritten by aside#text4-widget.

So I understand that the overall widget style is overriding the particular default footer style I selected; how would I specify specific styles and where to override the default behaviors assuming i followed the coventions widgetarea-three, widgetarea-four, and widgetarea-five??

Thanks.

jerryc Mar 18, 2013 07:58 AM

There's a simple way if you're only doing a few, without even editing the css files. Just put a style change in your template such as "style = color:#ffffff;" in your sidebar div.

If you were doing many, it would be easier to put it in a css file, especially if you wanted to change them.

If you want them to be all the same look, then give them a class, so if you change one, you can change them all with one css file edit.

Try different methods, then use firebug to check your results. Validate often as you go. Have fun.

juggledad Mar 18, 2013 08:40 AM

In my opinion, you should avoid inline CSS when possible, without good notes, it can make future maintenance a nightmare. By putting it into the CSS styling, you keep things together and can reuse the same CSS for multiple HTML elements

I would put any additional CSS in the last CSS file (not at my desktop so I can't name exactly) and remember the order of precedence for CSS

drex Mar 19, 2013 10:58 AM

1 Attachment(s)
I tried several ways, and created a footer class for widgets called footc1 as you can see in screenshot below.

however, whereever i put it, it's css keeps getting overridden.

can anyone help? i've tried to move it several places.

thanks in advance!

juggledad Mar 19, 2013 01:13 PM

you need to be more specific in the CSS Selector. since the html structure is
HTML Code:

<div id="widgetarea-three" class="footerc1" style="padding: 0 10px">
      <aside id="text-4" class="widget widget_text cf">
        <div class="textwidget">
            your text is here
        </div>
    </aside>
  </div>

you should use 'div.footerc1 aside div.textwidget' - try that and see what it does

drex Mar 19, 2013 02:53 PM

thanks for the reply juggledad and forgive my ignorance; where exactly should i put this??

'div.footerc1 aside div.textwidget'

should that be an entry under style.css or widget.css?

should that be

.div.footerc1 aside div.textwidget {

blah blah blah

}

or

#div.footerc1 aside div.textwidget

the html being generated is from the firebug plugin; the code generating it is from the subtemplate footer.

i'm sorry, but i am not following where exactly to put this...

juggledad Mar 19, 2013 04:06 PM

you can put it in any of the CSS files, though I'd probably put it at the end of the 'clearfix.css' so you would know that is where you override any CSS.

so you would add
HTML Code:

div.footerc1 aside div.textwidget {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}

there.

drex Mar 19, 2013 04:35 PM

did that, does not change color;
HTML Code:

.widget {
    color: #666666;
    font-size: 14px;
    line-height: 1.3;
}

seems to overrule it. it is from
HTML Code:

html.notie67 body.home div#footer-bg div#footer.row div#widgetarea-three.footerc1 aside#text-4.widget
HTML Code:

<aside class="widget widget_text cf" id="text-4">                        <div class="textwidget">&copy; 2013 H. Drexel Dobson III MD<br>
Surgical Associates of Brevard<br>
1004 Beverly Drive Suite D<br>
Rockledge, FL 32955<br>
321.637.2954 24 hrs availability <br>
321.637.2654 fax <br></div>
                </aside>


drex Mar 19, 2013 04:37 PM

HTML Code:

.div.footerc1 aside div.text-4.widget {
text-align: left;
font-size: 14px;
line-height: 1.3;
color: #ffffff;
}

didn't work either.

jerryc Mar 19, 2013 04:54 PM

I see some syntax issues. Here are some basic syntax rules for CSS files:
  1. Elements have no punctuation before them.
  2. Classes are prefaced with a period.
  3. ID's are prefaced with a hash mark (#).
So, for example, you have a div with a period before it, but I doubt you're trying to refer to a class named div. You have a reference to text-4, which seems to be an id, but you have it prefaced with a period.

Try cleaning up your syntax, and you should have it.

juggledad Mar 19, 2013 05:20 PM

go back and check my original CSS, there was an errant period which I removed. (I claim the ten month old in my arms did it)

drex Mar 19, 2013 07:22 PM

thank you both.

so, i need to read up more on css conventions.

i take it that it is an element, a specific subset of a class, and not an id....

enjoy your 10 month old and thanks...

juggledad Mar 19, 2013 07:33 PM

Element is an HTML element. You should take a CSS tutorial, htmldog.comhas a good one


All times are GMT -6. The time now is 11:55 AM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.