How do we add a button on the front page of the Forefront Theme?
-
Hi,
We would like to add the button on our front page (as pictured in the demo) to our Forefront Themed blog, but the ‘tip’ in the description is not enough info for us to get started. The description says to “use CSS class: button”, but where and how do we do this? We can’t find anything obvious in the control panel.
-
Thank you! I think we’re confused as to where we would add that attribute? Can you provide more specifics as to where we would go to enter that info? Sorry to be dense, but we are not web designers and are brand new to WordPress!
-
-
Absolutely! How does that work? I would prefer not to disclose our login info if possible…
-
I’m on staff, so I have access already. I just wanted to make sure to get permission before making any changes to your blog.
I have gone ahead and updated the “Front Page” page in your blog with the same text and link used by the Forefront theme demo site. You should be able to see the button here:
http://blog.originalmoxie.com/To see the code, open the “Front Page” page for editing in your dashboard, and click the “Text” tab at the top right of the editor. Can you see the class=”button” part of the HTML in the top line there?
https://originalmoxie.wordpress.com/wp-admin/post.php?post=20&action=editNote that because your featured image is so small for that page, the other demo text I added is getting cut off. You should add a larger featured image to that page.
-
Awesome! Thank you! Yes, we are just playing around with images and will definitely be changing both the header and banner images.
I’ll take a look at your changes and get back to you but it sounds like you’ve solved our problem. Thank you so much!
-
Hello again,
Thank you so much for the button! I’m wondering if there is any way to move it lower on the image. I figured out that you can change it from left to right align, but I can’t figure out how to move it vertically on the page. -
The button is an inline HTML element right now. So if you modified the page content to add other text, that would be one way to move it.
Another way would be to use custom CSS. Here is an example to get you started:
.front-page-content-area .with-featured-image .entry-content .button { position: absolute; right: 200px; bottom: 200px; }You would want to enter that into your Appearance → Themes → Customize → CSS panel and adjust the 200px values as needed to move the button around on the page.
Here’s a cool article about absolute positioning if you want to learn more about the CSS that makes that example work:
-
-
-
wow, thanks so much! I’m sure you see hundreds of blogs, so it makes me proud that you think our photo is superb :-)
I have YET another question…
I would like there to be text space under the featured image on our front page. Right now, the text only shows up inside our image. Is there a way to make it appear UNDER our image??
Also, in the Forefront demo it says there is space for two testimonials on our front page, but I’m not seeing anything to indicate where those spaces are or how we can edit them. Could you point me in the right direction please and thank you?? :-) -
I would like there to be text space under the featured image on our front page.
It looks to me like the Forefront theme is setup to show text under the front page featured image if you put text widgets in the “Front Page Widget Area One” and “Front Page Widget Area Two” areas:
https://originalmoxie.wordpress.com/wp-admin/widgets.phpAlso, in the Forefront demo it says there is space for two testimonials on our front page, but I’m not seeing anything to indicate where those spaces are or how we can edit them.
The theme page says to look under Testimonials → Add New in your blog dashboard. You should be able to see “Testimonials” as an option on the left at https://originalmoxie.wordpress.com/wp-admin/
-
Thank you so much for all your help! Now I know why they call you Happiness Engineers :-)
Today’s question is a general one. Thanks to you, we have our awesome button and I know how to move it around the image. YES! The problem is this: when I look at our blog by going to blog.wordpress.com, the button is in a different spot than it is when I’m working in the customize menu.
I thought maybe it was because I had additional text in with the button, but I removed everything else and the button is still wrong :-(
Is there something additional I need to do to make the button position stay where I want it??
Thanks again! -
The button will probably move depending on the amount of spat the theme is allowed — if the browser window shrinks, the button adjusts.
-
Ah yes, we just watched it adjust when I played with my window size. Is there any way to anchor it? If not, I think we’re going to have to go another route.
Thanks! -
It’s possible to adjust the spacing separately by targeting different screen sizes using media queries. If you are not already familiar with media queries, here is a basic overview on them so you have some background about what they are and how they work:
http://www.peachpit.com/articles/article.aspx?p=1604236&seqNum=2To find them for your current theme, search for @media on this page:
https://s1.wp.com/wp-content/themes/premium/forefront/style.css?m=1371260095g&minify=falseThere are several. What you will want to do is pick out which screen sizes you want to target, and setup custom CSS to move the button for each one you think is necessary. Here is a copy of each @media container from the link above:
@media screen and (max-width: 569px) { /* Put your CSS here. */ } @media screen and (min-width: 570px) { /* Put your CSS here. */ } @media screen and (min-width: 750px) { /* Put your CSS here. */ } @media screen and (min-width: 930px) { /* Put your CSS here. */ } @media screen and (min-width: 1110px) { /* Put your CSS here. */ } @media screen and (min-width: 1230px) { /* Put your CSS here. */ }Here is an example that will apply different positioning to the button for screen sizes 750px wide and above:
@media screen and (min-width: 750px) { .front-page-content-area .with-featured-image .entry-content .button { position: absolute; top: 200px; left: 200px; } }If you add that and check the blog from different browser window sizes, you will see that it’s always in the same position. You should also see that you probably do want to change the positioning depending on the screen size so the button fits in nicely. You can use as many @media lines from the sample list above to add in different positioning.
-
Hi again,
Thank you for the information about media queries, I’m pretty sure I understand it.
I have a question that is indirectly related to this.
I wanted to check the different positions on my phone, but when I go to our blog the interface looks nothing like our actual blog. Our button is just a line of text, and our featured image doesn’t appear at all.
Can you explain how I get our mobile site to look like our desktop version? -
I just tried changing the min-width for a @media screen line but it’s not changing the appearance.
Right now I’m trying to focus on the button staying on a larger screen. I’ll worry about the smaller screens next.
Is there a dimension larger than 1230 that would work? The button is still showing up in the wrong spot on Rachel’s desktop. I’ll leave the custom CSS I entered today in case you want to take a look.Thank you!
kat… -
Can you explain how I get our mobile site to look like our desktop version?
Your blog currently has a separate mobile theme turned on.
You can see the setting here:
https://originalmoxie.wordpress.com/wp-admin/themes.php?page=mobile-optionsYou can find out more about the mobile theme here:
http://en.support.wordpress.com/themes/mobile-themes/
- The topic ‘How do we add a button on the front page of the Forefront Theme?’ is closed to new replies.
WordPress.com Forums 