Active buttons on front page
-
I have 80’s theme. I would like to add active buttons/links on front page with words “Pop’s Art for sale” “See blog from the start”. My blog is a story and people are missing the menu button. The blog arrives at the current blog but I also want visitors to be able to go to immediately see it from the very start (I have this link in the menu page, but people are not going there). I also need an active link to the “Pop art for sale” to be on the front page.
Mark.The blog I need help with is: (visible only to logged in users)
-
What you would have to do is to add the two links to a text widget in the footer. You can create your own button in an image editing program, or you can just add text links to the text widget and then we can create a style in CSS for them and move the buttons up into position somewhere on the header image near the menu button. Here are some useful links for working with text widgets.
-
I have the http page links to go with the two text widgets I want to add to the first page, but I don’t follow how the text name is connected to the link. I’m lost :-(
For example I’d like to click on the words that are linked to the http page:
“Watch Nan’s blot from the very start”
http://nanavantrek.com/2015/?order=asc -
In the post or page editor, you would highlight the text you wish to link and then click the link button and put in the URL and click Add Link. Then you switch to the Text tab and copy out the code and paste that into the text widget in the footer. Do that for each link. Once you have that done, we can move the widget up into the header area. Make sure and click Save on the text widget after adding the links.
There will be an additional bit to add to the text widget code, but we will get to that after you have the links in the text widget.
-
HI,
I’m not following you I’m sorry. I’m not seeing any text on screen from the text widget or any text appear on the screen or footer area. I’m not sure if that was removed when I once asked to remove any evidence of date etc. So I don’t see anything when I create a text widget. And then I don’t follow page edit steps above. The text widget has title, content and visibility options. I put the link in the content box, guess that was dumb. But i don’t see any text to play with on screen. Is it easier via a pic with a link?? -
You had the visibility of those two widgets set so that they did not show on your site main page. I’ve corrected that. Also, what you have in the text widgets was just the URL you wanted things to go to. You had not created the HTML links. I’ve also corrected that for you. Add the following to your custom CSS and see what you think.
a.my-button { background-color: #fff; padding: 20px; vertical-align: middle; color: #000 !important; position: relative; top: 3px; } #text-3 .textwidget, #text-4 .textwidget { height: 40px; } #text-3, #text-4 { width: 300px; } #text-3 { position: absolute; top: 50px; margin-left: 150px; left: 0; } #text-4 { position: absolute; top: 110px; margin-left: 150px; left: 0; } @media screen and (max-width: 1000px) { #text-3 { top: 100px; margin-left: 50px; } #text-4 { top: 160px; margin-left: 50px } } -
Oh my goodness you’re like an angel. Thanks so much of doing that. It’s what was desperately needed from users. I can’t thank you enough. Iy was very kind of you, as I just got lost :-)
I don’t know if it’s possible to have those two active button “act like a button” as in change colour when you mouse over it?? No buggy I am really happy that its there and it works. Can both the new buttons you’ve added be across the top, in line with existing buttons, and one centre left and one centre right?? Just spaced across the top really?? But if you can’t no problem. I’m a happy chappy
Regards,
Mark.
BTW is there an e-commerce or way to set up selling stuff on the site?? -
Sure Mark, we can give the buttons a hover color. Add this and then edit the color as desired.
a.my-button:hover { background: #cc0000; }With the WordPress.com Business plan upgrade, we offer several ecommerce packages you can use. We do not at this time offer ecommerce with the WordPress.com Premium Plan.
-
Oh the red is great, but I don’t know how to change the colour anyways LOL. When I hit the edit button I seem to only be able to change the text.
Is it possible to move the buttons spaced along the top? And is it possible the original left and right menu buttons also have the same hover colour. If not I’m all good. I’m really happy with your help. Do you think etsy is better than ebay, like an ebay store to try and sell my art?? I need a location it can be ordered and paid for etc
Regards and many thanks,
Mark -
On the color, it is set in the CSS that I gave you. It is the #cc0000. This chart is one of the easiest to read and figure out: http://html-color-codes.info/web-safe-colors/ .
I’ve changed some stuff and moved the buttons inline horizontally all the way down to 600px. On narrower screens, the button to the right starts to disappear off the right of the screen. Replace this
#text-3 .textwidget,#text-4 .textwidget { height:40px; } #text-3,#text-4 { width:300px; } #text-3 { position:absolute; top:50px; margin-left:150px; left:0; } #text-4 { position:absolute; top:50px; margin-left:380px; left:0; } @media screen and (max-width: 1000px) { #text-3 { top:100px; margin-left:50px; } #text-4 { top:100px; margin-left:300px; margin-left: 280px; } }with this
#text-3 .textwidget,#text-4 .textwidget { height:40px; } #text-3,#text-4 { width:300px; } #text-3 { position:absolute; top:50px; margin-left:150px; left:0; } #text-4 { position:absolute; top:50px; margin-left:380px; left:0; } @media screen and (max-width: 1000px) { #text-3 { top:100px; margin-left:50px; } #text-4 { top:100px; margin-left:300px; margin-left: 280px; } } @media screen and (max-width: 600px) { #text-4 { margin-left: 50px; top: 160px; } } -
OK, I have another question. I did end up creating a little spot on esty to try and sell my pics. (This just kind of happened and it’s working). I put a link to it on the buy pop’s art page. (The page you go to from the new link you made). PROBLEM: people click on this new link and this goes go to the page, BUT as the main picture of the car and caravan doesn’t change, some people think they’ve gone nowhere. Is this just the theme (which I won’t change), or is it possible to change that picture you go to above (just that page) to for example a picture of Nan & Pop pushing a shopping cart?? Also is it possible to have an active link that goes to my etsy site with just an etsy logo also on the from page? along the top? BTW etsy site is: https://www.etsy.com/au/shop/Nanavantrek
Warm Regards,
Mark. -
Also is it possible to have an active link that goes to my etsy site with just an etsy logo also on the “front” page? along the top? BTW etsy site is: https://www.etsy.com/au/shop/Nanavantrek
(was meant to say front page and not from page previously)
Basically I’d like an etsy logo on my front page or even a shopping cart logo that goes straight to the etsy site I’ve set up.
-
Have you got an image you would like to use? It should be as big as the header image you are using now, which is 901 x 664 pixels? If so, is it in your Media library? If not, upload it to your media library and post the URL of the image and I can work out the CSS to hide the existing image and insert the new one.
-
-
Add this and see what you think. Due to the proportions of the image I can’t get the hands and handle into the frame and still get the idea of zooming through aisles at a market.
.page-id-589 .backstretch img { visibility: hidden; } .page-id-589 .backstretch { background: url("https://nanavantrek.files.wordpress.com/2016/02/shopping-trolley-page.jpg") no-repeat scroll center 20% /cover; } -
i can easily adjust the picture. I have it here in photo shop. What sizing would you like it in??
-
-
Your header image is 901 x 664. Make it in that size and see what happens. Upload it to the media library, get the URL of it and then replace the URL in the code I gave. We can make some positioning changes with CSS if necessary.
-
I mucked about till I found a fit but not sure if it looks shitty. might be trying to hard. I have a picture of Nan and Pop at a gallery??
- The topic ‘Active buttons on front page’ is closed to new replies.
WordPress.com Forums 