Forum Replies Created
-
AuthorPosts
-
September 1, 2014 at 7:45 pm in reply to: Agency Pro – Post title fonts (from grey to white, bold, and shadow) #122309TonyaMember
Hi Donald,
In your style.css file, do the following:
1. Go to line 1437 and change the color to #fff and add both the font-weight and text-shadow:
.otw-sc-portfolio .otw-portfolio-filter li { font-family: "Open Sans", sans-serif; color: #fff; /* was #969696 */ font-weight: bold; text-shadow: 1px 1px 1px #555; /* You can try various shades including #222 */ display: inline; padding: 0; }
2. Go to line 1453 and change the color to #fff:
.otw-sc-portfolio .otw-portfolio-filter li a:link, .otw-sc-portfolio .otw-portfolio-filter li a:visited { color: #fff; /* was #969696 */ }
If you want to change the hover color it's in the next line.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi,
I would be greatly beneficial if you could create a post or page as an example for us to look at. I have some thoughts but need to check the HTML and CSS to see what is happening.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi David,
To make these changes, you need to open up the style.css file. You can do this via the Editor in WordPress admin (although be very careful as this is the live file) or by editing a copy of the file and then transferring it back onto your server. Either way, please follow along and we'll remove the stylings you do not want:
1. Go to line 1872 and comment out the border-color as such:
.agency-pro-red .genesis-nav-menu a:hover, .agency-pro-red .genesis-nav-menu .current-menu-item > a, .agency-pro-red .genesis-nav-menu .v .current-menu-item > a:hover { /* border-color: #de3233; */ }
2. Go to line 1023 and comment out both the background-color and border-color:
.genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .v .current-menu-item > a:hover { /* background-color: #282828; */ /* border-color: #d7c603; */ color: #d7c603; }
If you wish to also disable the background color change on hover in the submenu, go to line 1057 and comment out the background-color:
.genesis-nav-menu .sub-menu a:hover { /* background-color: #333; */ }
Make sure you save the file.
Now the next step is you need to change your child theme's version as then it will load a new version of this style.css file into the browser of your audience who have already visited your site. To do this, open up the functions.php file and find CHILD_THEME_VERSION. Change the value as such (increase the number):
define( 'CHILD_THEME_VERSION', '1.0.1' );
. Then save the file.I hope that helps.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHello,
The width of your site is determined by the width set in:
.site-inner, .wrap { margin: 0 auto; max-width: 1140px; }
When wanting to adjust either the sidebar or main content areas, the key is to use this max-width value (whatever it is on your site) and then subtract out the other area, which leaves you the maximum amount you can use.
For example, let's say your overall max-width is set to 1140px - 360px for the sidebar - 20px gutter spacing (gap between the sidebar and content area) leaves you with a maximum available content area width of 760px.
I'd start by running these numbers and then seeing if there are any opportunities to reduce the gutter (gap) spacing.
If this does not resolve your issue, then please share a link to your site to allow us to take an in-depth look.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're welcome. 馃檪 Enjoy your weekend.
@JanHoek Sorry to step on your posts. I didn't see that you had already posted after mine popped. Cheers
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberNot a problem. Make it look just like this:
.site-header, .nav-secondary { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); }
Notice that the .nav-secondary::before and border-top are both gone and I added .site-header.
Cheers!
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberOK. Thank you for the example site. That helps to see what you want.
1. Delete what I had you add at line 1988.
2. Add this code instead:
.nav-secondary { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1); border-top: 5px solid #ff8584; }
3. Make sure you do the first 2 steps above to give rid of the black lines that are there now.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberAbsolutely. You want to open up the style.css file and make the following changes:
line 1058: comment out the border-bottom style as follows (which removes the top border over the nav menu:
.site-header .wrap { /* border-bottom: 2px solid #222; */ padding: 30px 0; }
on line 1293: comment out the border-bottom style s follows (which remove the border below the nav menu):
.nav-secondary .wrap { /* border-bottom: 1px solid #222; */ }
OK, now here is one iteration of a gradient type of border (there are many you can do). Go to line 1987 and add this code in:
.nav-secondary::before, .nav-secondary::after { content: ""; height: 3px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(147,147,147,1) 50%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(147,147,147,1)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); display: block; margin-bottom: 10px; margin-top: 10px; }
You can adjust the "thickness", per sey, of the line via the "height" style. To make it more thin, decrease the number of pixels say to 1 or 2.
Have fun!
Tonya 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberGood morning,
Looking at your home page, the slider is showing up as it's the top picture on your site right now; however, you only have one post set to featured. Therefore, only one image is loaded into the slider.
The post below "Welcome to..." is the Home Middle widget with the featured post in it.
The Home Bottom widget area is on the page too; however, I suspect you only have one post right now.
Therefore, do this for me. Load in another blog post, even if it's some dummy content just to see if the slider shows another post and the bottom widget shows it too.
Let us know what happens.
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHi,
It's fairly easy to add the after entry widget. Here I wrote a tutorial to help you out: How to Add the Genesis After Entry Widget to All Custom Post Types.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberWonderful. So glad. You as well. 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberWhenever you want to change styling, you will be editing or adding CSS to your child theme's style.css file. The best way to make edits is to first test your changes within your browser using either Chrome's Developer Tools (to open the panel you simply right click on the item on the page and select "Inspect Element") or Firefox's Firebug (again right click on the item and select "Inspect Element").
You will then see the HTML on the left and the CSS on the right. You can then go through and change things like colors, padding, fonts, and more. Once you are happy with the changes, you then copy those same changes into your style.css.
Next question you'll have is: how do I find it within my stylesheet? Within the Dev Tools panel, you'll see the line number where that CSS is located within style.css.
OK. Now that's a lot of info I know. But I wanted to give you the rundown. Let's get specific with the opt-in on your current Primary Sidebar:
To change the background-color of the opt-in widget, go to line 869 where you will find .enews-widget. You could change the background hex color there:
.enews-widget { background: #e9e6dc; /* This is the current color. Change to what you want. */ color: #333; padding: 20px; padding: 2rem; text-align: center; }
To change the red button to another color, go to line 892:
.enews-widget input[type="submit"] { background: #f05123; /* change this to the color you want */ color: #fff; /* this is the color of the text LET'S GO! */ margin: 0; width: 100%; }
I hope that helps 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou are very welcome. So glad you found the buggy plugin. Let us know if you need any additional help.
When you feel this topic is closed, please mark this topic as resolved. It helps people like me quickly find open issue problems.
Enjoy your weekend!
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're welcome. Always happy to help 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberOK. I see that the sidebar is back in position and the content is correctly formatted again. Therefore, one of the plugins is causing the problem. Plugins can cause havoc at times. 馃檨
Your next step is to one-by-one enable a plugin, refresh your Welcome page, and then see if the problem reappears. When you stumble on the one that causes it, disable that one and move on to the rest. If another causes it, disable it and continue. Once you've gone through all of your plugins, you should have at least 1 plugin that caused the problem.
Let us know what you find.
Cheers,
Tonya 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberAnd do me a favor and leave all the plugins disabled. Let me know when you do and I'll check the page for other problems.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're site is very nice. We'll get to the bottom of this problem. 馃檪
Just to be safe, disable all the plugins. If the problem goes away, then one-by-one enable the plugin and recheck.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHI,
A closing </div> element is missing within the HTML as it's kicking several items out of their flow including pushing the pagination and entry-footer out of the <article></article> structure.
The first place I see a problem is within your op-in form, as all of the hidden fields are popped outside of the ending </form> element. I'd start by disabling that plugin and see if your problem goes away.
If that doesn't help, let us know and we can look some more.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberYou're welcome. Enjoy the rest of your week 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampTonyaMemberHello,
On content-sidebar pages, there is a HTML tag right after , which you can see when using Chrome Dev Tools or Firebug (Firefox browser):
<div class="footer-widgets-1 widget-area"> <div id="text-18" class="widget widget_text"> <div class="widget-wrap"> <strong> <div class="textwidget"> ... your widget contents are here ... </div> </strong> </div> </div> <strong></strong> </div>
As a matter of fact, if you look at all the widgets on the content-sidebar pages, tags are dispersed randomly, indicating there is a problem. The key here for you to find the root of the problem with where these tags are being added.
1. Has your child theme been customized? If yes, then start by searching in the functions.php for tag.
2. Look at the contents of each of your widgets and if you use a tag, make sure you closed it with a tag.
3. Disable plugins and see if the problem goes away. Then enable them one at at time until you discover which one is causing it.Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts