Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Plugins & Atahualpa »

[SOLVED] Unable to change font color of Tubepress widget text


  #1  
Old Oct 15, 2009, 05:56 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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
  #2  
Old Oct 15, 2009, 06:43 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {....}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 15, 2009, 09:38 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
Thanks Juggledad for your quick reply but still being a beginner at this HTML stuff so I need some direction, cheers for your patience.

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.
  #4  
Old Oct 15, 2009, 11:42 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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.
  #5  
Old Oct 28, 2009, 05:00 AM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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?
  #6  
Old Oct 28, 2009, 05:40 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Oct 28, 2009, 05:47 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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>&nbsp;<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>&nbsp;</h3></div><div id="calendar_wrap"><table id="wp-calendar" summary="Calendar"><color: #000000;>
  #8  
Old Oct 28, 2009, 06:47 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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">
   <div class="widget-title">
     <h3>&nbsp;</h3>
    </div>
    <div id="calendar_wrap">
        <table id="wp-calendar" summary="Calendar">
  	  <caption>October 2009</caption>
	    <thead>
	     <tr>
		<th abbr="Monday" scope="col" title="Monday">M</th>
		<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
		<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
		<th abbr="Thursday" scope="col" title="Thursday">T</th>
		<th abbr="Friday" scope="col" title="Friday">F</th>
		<th abbr="Saturday" scope="col" title="Saturday">S</th>
		<th abbr="Sunday" scope="col" title="Sunday">S</th>
	</tr>
	</thead>

	<tfoot>
	<tr>
		<td colspan="3" id="prev" class="pad">&nbsp;</td>
		<td class="pad">&nbsp;</td>
		<td colspan="3" id="next" class="pad">&nbsp;</td>
	</tr>
	</tfoot>

	<tbody>
	<tr>
		<td colspan="3" class="pad">&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
	<tr>
		<td>5</td><td>6</td><td>7</td><td>8</td><td><a href="http://fastyacht.net/wordpress/2009/10/09" title="Fastest yacht in the World">9</a></td><td>10</td><td>11</td>
	</tr>
	<tr>
		<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
	</tr>
	<tr>
		<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
	</tr>
	<tr>
		<td>26</td><td>27</td><td id="today">28</td><td>29</td><td>30</td><td>31</td>
		<td class="pad" colspan="1">&nbsp;</td>
	</tr>
	</tbody>
	</table></div></div>
You can see that 'October 2009 is in a <caption> but it doesn't have an ID (ID can only be used once in a document) we look at the block in is inside. It's inside a <table> and the table has an ID so you can be very specific here and code
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 { 
   color: #00FFFF; 
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Oct 28, 2009, 07:55 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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.
  #10  
Old Oct 28, 2009, 09:27 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the problem is not with that CSS insert but the one before it. You have
HTML Code:
.post-bodycopy {
font-size:15px;
 {
table#wp-calendar caption {
color:#00FFFF;

}
notice right before the word table theeree is a { that should be a }. since there is no closing '}' all the CSS following is part of the previous selector
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Oct 28, 2009, 10:16 PM
Topcat1
 
11 posts · Oct 2009
Auckland, New Zealand
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Unable to change text styling in Atahualpa 3.4.1 prgupta Atahualpa 3 Wordpress theme 2 Sep 8, 2009 11:53 AM
BUGFIX 342: Can't change text font, in text widgets Leoni Old Version fixes and change logs 3 Aug 5, 2009 04:30 AM
How do I change the Font color and bullets for the Page title in the Page Widget chrysos Page & Category Menu Bars 2 May 31, 2009 06:15 PM
Unable to use autoresponder form code in sidebar text widget TonyLogue Sidebars & Widgets 0 May 8, 2009 03:30 AM
Hw 2 Change Sidebar first level font size text ? RVB92 Sidebars & Widgets 1 May 3, 2009 05:37 AM


All times are GMT -6. The time now is 05:20 PM.


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