Welcome! To use this support forum, please Login or Join Today!

   

Installation of Element Theme

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Hi Casey,

I just downloaded the Element theme and have installed both the parent and child into wp.  I have very little knowledge of HTML, and will most likely just use the template features for layout, widgets, etc.  However, I would like to customize the header to include my logo and customize the header color to match the logo background color.  I can’t really give you an example to see, but what I mean is.. my logo is white on a gray/brown background.  I want to change the color of the header field (all the way across) to match the background color in my logo, and then place my logo in the center of the header.

How easy is it to make the header changes?  Should I activate the parent or child theme?  When I view the “parent” live demo within wp, there is more structure to build from.  When I view the “child” live demo, it’s very plain and stripped down.

Please let me know which theme (parent/child) to activate, and how to make the header changes.

Thank you,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Jeff,

You should activate the child theme and then navigate to Appearance → Theme Options.

What you’ll want to do is upload your header background image under the “Background” tab. Make sure it’s a seamless image pattern and set it to Repeat-Horizontally, Top Center and Scroll Normally.

Next, under the “Header” tab, upload your header image with the same background texture, set the size and and you should be good.

If you load one of the presets, this should already be done for you and you can just replace the image. Let me know if you need any other help. If you have an image you can post of your desired end result, perhaps I could walk you through it.

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Thanks Casey,

I tried to attach my logo to my original post, but it didn’t accept it.  I tried again on this post, but when I hit submit post I get a message “we are unable to accept file attachments at this time”.  It sounds like what you’re telling me makes sense, and you get what I’m trying to do. 

I’m just looking to make the header a solid background color (to match logo background - no patterns or textures at this time) and then upload the logo to float in the center.  I’m thinking that it will work fine that way and resize properly for smaller devices.

When I upload the header background image, do I need a specific size? 

I’m not sure what you mean by “if I load one of the presets, this should already be done for you..”

If I activate the child theme, how do I get the look and feel that shows in the parent theme when I view in “live demo” within the wp admin theme view?  The child theme is very plain when I view it in “live demo”, no background color, no nav buttons, etc.. very stripped down.  Will the parent “look and feel” come over it I only activate the child, or will I have to create all of what’s in the parent? 

I’m trying to get as much info as possible before I activate the theme, in case I get all messed up and my site is a wreck.

Thanks for your help,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Jeff,

It’s safe to activate the child theme. As soon as you activate it, just go to the “Preset Styles” tab under Theme Options and load up one of the four presets. The reason you want the child theme active is so the parent can receive automatic updates without you losing your customizations.

For your header background, if you just need a solid color it’s probably easier to just paste the CSS below into “Custom CSS” under the General Settings tab. Change the #000000 color to the background color of your logo then upload your logo under the “Header” settings tab.

#header {
background:#000000 none;
}

 

 

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Great, I will give it a go.  Thanks Casey.

Jeff

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Thanks for your help Casey! 

My header came out like I had planned.  Solid color is a bit plain and simple, but maybe I’ll enhance it somehow later on.  Take a look at my site… http://www.homeowneradvocacygroup.com.  I like the way it is coming along.  Let me know if you have any feedback.

I have a couple questions:

1. How can I change the nav button font?

2. I’d like to add a testimonial slider at the bottom of the home page.  You’ll see I’m using one of the page templates.  I’d like to add the slider just under the one-third paragraphs and just above the call to action.  Or maybe at the bottom under the call to action.

I’m very happy with your theme, and thanks for the great support!

Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Jeff,

Looking great!

First of all, if you want to remove that small margin between the header and menu, just go to Appearance → Editor → style1.css and change:

#header {
 background: url(./images/style1/header_bg.png) repeat-x center top;

to:

#header {
 background: url(./images/style1/header_bg.png) repeat-x center top;
 margin-bottom: 0;
}

To change the menu font, scroll down to where you’ll see /* @group Menu */ and change:

#menu {
 height: 62px;
 background: url(./images/style1/nav_bg.png) repeat-x center bottom;
 font-size: 1.1em;
 font-family: Droid Serif;
}

to:

#menu {
 height: 62px;
 background: url(./images/style1/nav_bg.png) repeat-x center bottom;
 font-size: 1.1em;
 font-family: Sans-Serif;
}

Lastly, to add the testimonials slider, you’d create a new slider from the “Slides” menu, add a few text slides to it and use the shortcode to insert where you want it to go in your markup using the [slideshow] shortcode. You may have to switch to text view in your page and find the gap between the closing one_third_last and cta tags:

 

<hr class="clear">

....put your [slideshow] shortcode here….

<div class="cta">

 

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Thanks for the help Casey. 

I corrected the margin at the bottom of the header - much better!  Also changed the nav font.

I’ve been messing with a testimonial slider for the home page and want to do a couple things..

1. I can’t see how to change the font size and style within each slide.  Do I have to make that change in the code after it’s published?

2. I’d like for the slider text to float without sitting in a “slider box”.  Is that possible?

Thanks,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You certainly can. If you want to change all instances of content slider/rotators then you could override the CSS by editing style1.css:

Just below this line:

/* Slider Background Color */

Change:

li.slide,.flexslider {
 background-color: #edece7;
}

to:

li.slide,.flexslider,.flex-container {
 background: none;
 border: none;
    box-shadow: none;
}

If you want to keep the slider styles except for the home page, you can specify the rule for the body class like so:

body.home li.slide,
body.home .flexslider,
body.home .flex-container {
 background: none;
 border: none;
    box-shadow: none;
}

 

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

I’ll give this a whirl, thanks Casey.

What about the font size and style?  I’d like to change it as well.

Thanks,
Jeff

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Question…

Where exactly should I place your suggested code in the CCS?

___________

If you want to keep the slider styles except for the home page, you can specify the rule for the body class like so:

body.home li.slide,
body.home .flexslider,
body.home .flex-container {
background: none;
border: none;
  box-shadow: none;
}
____________

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I would add it to the very bottom so it overrides any previous rules.

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Thanks Casey!  I also asked about changing the slider font - size and style.  Do I make this change in the code after publishing?

Thanks,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

That would depend. Are you referring to the slider in the teaser (top) area or within content? The slider text or the heading? At the bottom of style1.css you can see:

/* @group Slider Customization */

you could certainly add a specific font size to any element there.

Do I make this change in the code after publishing?

I’m not sure I follow. You can add it at any time you want.

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

I’m creating a “testimonial” slider.  I’m referring to the text that is displayed on each text slide.  When I created the slides, I didn’t see a way to modify the font size or style.  I’d like for the rotating slides to be a larger italic font and possibly a different style than the default.

I was asking if I should publish the slider and then is there an option to go into the code and make the font change there, or is there a way to modify the font in each text slide before publishing?

Hope that makes sense.

Thanks,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Ok, I gotcha…you just want it to look like more of a quote.

Just add this to your style1.css towards the bottom:

.flexslider .inner p {
 font-family: Georgia;
 font-style: italic;
 font-size: 20px;
 line-height: 140%;
}

Again, if you only wanted this rule to apply to a specific slider, instead of “.flexslider .inner p” you could use “body.home .flexslider .inner p” or “body.page_id_XXX .flexslider .inner p”