Website Buttons
-
I would like to add buttons for my favorite website links on my favs page. How do I do this. I don’t see an option to insert buttons
The blog I need help with is: (visible only to logged in users)
-
Hi there, could you explain a bit more what you mean about adding buttons for your favourite sites?
I visited your Favs page here and see links to some sites:
https://drjoyblog.com/my-favs/
Could you describe in more detail what you have in mind? Better yet, do you have an example you could link to on someone else’s site? Thanks!
-
-
They look like thumbnail images to me. You can ink to an image as easily as linking to words.
-
Hi @joyarmstead, thanks for the link to the example.
What they have done is to create an HTML table and then they have added the linked images to the cells in that table. With responsive designed themes, such as Apostrophe, and the theme/template they are using on the example site, HTML tables doesn’t work very well on smaller screens. If you visit the example page and narrow your browser window way down, you will see that the images shrink to the point that they become almost invisible.
We do have some options on doing this sort of thing. Do you expect to have a lot of links in your Favs, or will there just be a few? Knowing this will help us determine the best way to do it.
-
-
Thanks a lot. I’m about to sign off for the evening, so I’ll work something up for you tomorrow (Sunday) and post it for you.
-
-
What I would suggest is that we add some divs with CSS classes for each row of linked images in your Favs page. We would add classes to those divs to control width, and when things started to get small, we would use a Media Query to adjust things and make fewer columns. That way we can keep things working well for all visitors no matter if they are on a large desktop monitor, or a phone.
I’ve put together an example page on one of my test sites that you can take a look at. I would suggest narrowing and widening your browser window to see how things flow and change as the window/screen gets narrower. I would also suggest visiting my example page on a tablet and phone to see how things look there as well. Let me know what you think and if this is acceptable to you, I can give you the HTML you can use to do this and also the CSS.
-
-
You are welcome. If you need me to help with the code, just let me know, but for the most part, if you are familiar with the web inspector in your browser, you can inspect the page and see how I did it.
-
-
Absolutely I can help with the code. The first code is what you would put into the Text tab in the editor. I would suggest creating a draft page to get things inserted and working correctly and then you can copy and paste it (from and to the Text tab). The code below is a row of four. I would suggest inserting the images from within the text tab in the editor. Place your cursor between the > and < in the favs-1 div and then insert your image and set the link. I would suggest inserting at full-size and the image should fill the divs. Continue on with 2, 3 and 4.
For the next row, copy/paste the code again below the other code and insert the images for the second row.
<div class="favs-row"> <div class="favs-1"></div> <div class="favs-2"></div> <div class="favs-3"></div> <div class="favs-4"></div> </div>The following would be the custom CSS. Paste it into Customize > CSS below all other CSS you have.
.favs-1,.favs-2,.favs-3,.favs-4 { max-width: 24%; display: inline-block; vertical-align: center; } .favs-1,.favs-2,.favs-3, .favs-4 { padding-right: 10px; padding-left: 10px; } @media screen and (max-width: 600px) { .favs-1,.favs-2,.favs-3,.favs-4 { max-width: 48%; } } @media screen and (max-width: 480px) { .favs-1,.favs-2,.favs-3,.favs-4 { max-width: 100%; } }Let me know how things go and if you have any problems or additional questions.
- The topic ‘Website Buttons’ is closed to new replies.
WordPress.com Forums 