How do we add a button on the front page of the Forefront Theme?

• 

  designsimply · Member · Jul 10, 2013 at 4:18 pm

  • Copy link

  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.

  I’m not sure trying to place the button *exactly* in the same place for every single possible screen resolution is really a good way to do it. There’s a huge combination of screen sizes. You can try to continue adjusting it bit by bit with media queries, but since HTML is flexible and the theme content is setup with to be responsive for different screen sizes by design, it could be an uphill battle.

  Having said that, media queries may also still work. Maybe we could step back and look at your end goal? I reviewed this thread and I see that you wanted the button to appear in the same position for every screen. Just to clarify, are you trying to make the button appear like this for every single screen size? http://cl.ly/QAEK

• 

  originalmoxie · Member · Jul 10, 2013 at 6:16 pm

  • Copy link

  Hello there!
  Thanks for the clarifying question, my articulation isn’t always up to par.
  Yes. We would like the button to stay in that (screen shot) position for as many screen sizes as possible. I did some further research and realize there are many, many sizes to cater to. Our thought was to hit 3 or 4 of the most popular sizes.
  I expanded my browser window until the button moved out of place, but when I try to add CSS using the minimum width of 1230 px, nothing changes on my screen and the misplaced button still remains on the full screen desktop appearance.
  It makes me think my media query isn’t working.
  I hope I didn’t make things more complicated just now!
  Thanks so much for your help.

• 

  originalmoxie · Member · Jul 10, 2013 at 9:30 pm

  • Copy link

  Hi again,
  I’m trying to add a hyperlink to our website on our header image. I’m using this CSS:

  .header {
  <div id=”header”onclick=”location.href=’http://www.originalmoxie.com;” style=”cursor: pointer;”>
  <div id=”headerimg”></div>
  }

  The little icon guy says I’m missing a rule, and an rbrace. Could you help please??

  Also, we made a page to Shop! and we want to bring in content from our website so customers can shop without leaving wordpress. Would something like that be possible by copying and pasting page source from our website, or is there another way to do it? We would rather not use images and hyperlinks to our site if we can help it.

  Thanks a ton!

• 

  designsimply · Member · Jul 12, 2013 at 9:05 pm

  • Copy link

  In this example:

  .header {
  <div id="header"onclick="location.href='http://www.originalmoxie.com;" style="cursor: pointer;">
  <div id="headerimg"></div>
  }

  You are mixing CSS and HTML and you can’t do that. WordPress.com does not offer the option to modify the HTML. So, the only way to make a header image into a link would be to hijack a link from another place on the page (i.e. a site title or menu item perhaps) and force the text off left and then expand the link to fit over the top of the header with absolute positioning. I wouldn’t recommend doing it for a site with a lot of complex media query rules though, since you would probably have to adjust the CSS for every break point. If it’s absolutely necessary to add a link to the header or make a lot more extensive design changes where modifying HTML is the ideal way to do it (it would be for this specific example) then you should consider switching to WordPress.org where you can get full control over all the code.

  An alternate route you might consider for WordPress.com would be to leave the header image as is and adjust the custom menu items so there are links for both the website and blog domain right in the main menu.

• 

  designsimply · Member · Jul 12, 2013 at 9:20 pm

  • Copy link

  Also, we made a page to Shop! and we want to bring in content from our website so customers can shop without leaving wordpress. Would something like that be possible by copying and pasting page source from our website, or is there another way to do it?

  WordPress.com does have some limitations, and not allwoing custom form elements (so that means no e-commerce shop options) is one of them. If the shop was simple enough (sounds like it wouldn’t be though) you could use plain images to link to PayPal to setup simple ‘buy now’ buttons to sell things. However, the limitations might be a bit too much. Take a look at the HTML list on this page to see what HTML is allowed in content areas and what isn’t:
  http://en.support.wordpress.com/code/

  (Note that HTML is never allowed in the CSS editor, like you had in your previous example. The CSS editor is always just for CSS and not HTML.)