[SOLVED] Unable to change font color of Tubepress widget text
Hi,
Relatively new to wordpress but have found this a good custom theme and am setting up before going live. I want the text in the sidebar widgets to be white on the blue background with the centre body/post text dark blue on the light blue background. Having read a few threads here and tried changing font colors in the ATO settings I am unable to change the text labels of the Tubepress sidebar widget. Have tried editing of: 1. Sidebars & Widgets - Style Widgets - Widget title box and content 2. A couple of suggestions of entries in the Add HTML/CSS Inserts area 3. Changing overall color via Body, Text, Links area, but this makes body/post area white as well Another way around is to possibly change the overall color setting, at No.3, but I couldn't find a way to make the body font dark blue again. Any other suggestions welcome. Thanks in advance. http://www.fastyacht.net/wordpress |
you need a CSS Insert using the tubepress ID for the CSS sector. If you look at the source of one of your pages you can see in the section 'left sidebar that there is a ID= that will be your reference, so it would be div#xxxx div.widget-title h3 {....}
|
Thanks Juggledad for your quick reply but still being a beginner at this HTML stuff so I need some direction, cheers for your patience.:confused:
I found this ID in the pages source code id="tubepress_embedded_object_1636383926" and have tried putting the following line into the CSS box in ATO but with no change. I'm doing something wrong but have no idea what. div id="tubepress_embedded_object_1636383926" div.widget-title h3 { color: #ffffff; } Can this be just dropped in the box as is, as I don't know how it knows where this change is made. I see some suggestions in the thread " Changing color and font of sidebar widgets" but they don't specify the text that can be seen below the Tubepress video button. |
Actually I have just discovered that it is not only the Tubepress font color I can't change. I have just added a plain text widget which shows the blue font as well.
So I guess it is more than just the plugin problem.:( As said above I think I have tried other suggestions in this forum. |
I have found a solution which is not ideal but will work by simply adding in font size & color to the 'Configure and Style Sidebars' area.
I added this to the default styles for the sidebars: font-size: 1.0em; color: #ffffff; This has enabled me to change the fonts here, however I have also noticed the Calendar dates are changed too. As this was not ideal having white on a white calendar background I have removed it for now. Is there a way to alter the Calendar colors at all? |
you will need to look at the generated source for the page.
Locate the code for the calendar widget then using the information (id= class= etc) you can construce a CSS selector and rules to do any styling you need. then put the CSS in the CSS Inserts and you should be good to go. |
I located and grabbed what appears to be the code for the calendar plus grabbed the reference to the right sidebar. Since I don't know where to put the font color code or how to indicate it, I have tacked to the end, but this hasn't worked. How should it be entered into the CSS insert window?
See the <color: #000000;> added to end. I had tried putting it between the h3's to be seen as <h3> <color: #000000;></h3> but that had no effect either. You can probably tell I am grasping at straws here. Presently entered in CSS inserts as follows: <!-- Right Sidebar --> <td id="right"> <div id="calendar-3" class="widget widget_calendar"><div class="widget-title"><h3> </h3></div><div id="calendar_wrap"><table id="wp-calendar" summary="Calendar"><color: #000000;> |
What you have entered is HTML, you need to construct a CSS Selector and rule - ok, lets say you want to change the color of the month/year on the calander. your generated code is this
HTML Code:
<div id="calendar-3" class="widget widget_calendar"> table#wp-calendar caption { <-- this is your css selector - it selects where this CSS will be applied color: #00FFFF; <-- this is the rule to apply, set the color red'ish } <-- indicates you are done so the whole thing would be HTML Code:
table#wp-calendar caption { |
I have inserted the code you provided but the calendar colors have not changed. What else does it require?
I have tried adding the " around the "wp-calendar" and then tried adding the id= in front of that, but to no avail. I also tried reducing the blank spaces between the { and the word color, again with no change. Your explanation is good, I believe you are saying that since there is an ID of <table>, that this provides the 'address' of where the change is to be made within the HTML. With the 'caption' being the second location indicator. The CSS insert is the rule applied at this location. I'm just trying to grasp a basic understanding of the terminology used. |
the problem is not with that CSS insert but the one before it. You have
HTML Code:
.post-bodycopy { |
That fixed it, well almost. The CSS insert with caption in it only changed the color of title, being the 'October 2009' text. I then created and added the second CSS insert which changed the font color of all the date numbers in the calendar, so all my CSS reads as:
.post-bodycopy { font-size: 15px; } table#wp-calendar caption { color: #212157; } table#wp-calendar { color: #212157; } The first one just alters the font size of the posts. Have made the color the same as body but hard to see it in the small calendar text. Thanks for your help Juggledad, I eventually got there and learnt something more along the way. |
All times are GMT -6. The time now is 03:05 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.