Need Help With CSS (Dara Theme)
-
1) I just switched my theme from Motif to Dara because I wanted social media icons displayed at the top of my page. However, three of the sites I want icons displayed for don’t have icons displayed. Can I fix this by adding new icons to my site? I have thee icons I’d like to use, and instructions for adding them to a site are provided here: https://insights.bookbub.com/bookbub-follow-bookmark-buttons-for-authors-websites/ I’m just not sure these instructions will work for a WordPress site…
2) How do I center the three books I have featured on my home page? And is there a way to remove the little lines on either side of the titles if I want to?
3) How do I hide the titles of my pages? With Motif, the page titles weren’t displayed on the page, just in the menu at the top. Is there a way for me to hide the titles of the pages?
4) Is there a way for me to reduce the left margin of the pages? Things seem off-center in comparison to the header and menu.
Thanks in advance to anyone who can help me solve these problems!
The blog I need help with is: (visible only to logged in users)
-
Hey there,
Have you tried going over the help articles on the Dara theme’s landing page? There’s an extensive CSS section there that might be of use to you:
https://theme.wordpress.com/themes/dara/
I hope this helps!
-
Hi there,
1) I just switched my theme from Motif to Dara because I wanted social media icons displayed at the top of my page. However, three of the sites I want icons displayed for don’t have icons displayed. Can I fix this by adding new icons to my site? I have thee icons I’d like to use, and instructions for adding them to a site are provided here: https://insights.bookbub.com/bookbub-follow-bookmark-buttons-for-authors-websites/ I’m just not sure these instructions will work for a WordPress site…
On the Dara Theme Showcase page under Social Links Menu about half way down the page, is a listing of the social services that are directly supported in Dara.
I may be able to work something out on this given the items are added using Custom Links. Can you tell me which services you wish to add, and if you have uploaded the icons, give me a link to one of them so I can see what I can do?2) How do I center the three books I have featured on my home page? And is there a way to remove the little lines on either side of the titles if I want to?
Hi, I’m seeing your books centered on your main page right now. Did you get this sorted out? On the tilde symbols before and after the title, add the following CSS to hide them.
.featured-page .entry-title::before, .featured-page .entry-title::after { content: ""; }3) How do I hide the titles of my pages? With Motif, the page titles weren’t displayed on the page, just in the menu at the top. Is there a way for me to hide the titles of the pages?
This will remove the titles from static pages.
.page .entry-header { display: none; }4) Is there a way for me to reduce the left margin of the pages? Things seem off-center in comparison to the header and menu.
Add this to your custom CSS to make the left and right margins on full width pages without featured images equal.
@media screen and (min-width: 1000px) { .content-wrapper.without-featured-image { padding-left: 55px; } } -
Sacred Path, thank you SO much! I’ve been doing Google searches like crazy and your expert answers are all over the Internet. I was hoping you would respond to me. Much appreciated. :)
-
Sacred Path, I wish to add icons for Goodreads, BookBub, and Amazon.
Here’s a link to the Goodreads icon I added to my media:
If you’re able to figure out how to do this, I’m not sure if 48×48 is a good size (so that it will match the other icons…
Thanks again for your help!
-
One other thing…how do I make it so that when people enter my website URL they are taken to my home page? It used to be that way, but now when the URL is entered, it goes to my blog.
-
Hi, thanks for the link to the image. I’ve added a menu item to your social menu for Goodreads, and here is the CSS that adds your icon to that menu item.
#menu-item-8389 a svg { visibility: hidden; } #menu-item-8389 a { background: url('https://kjfarnham.files.wordpress.com/2017/04/goodreads-48x48.png') no-repeat scroll center center / contain; }The first rule hides the existing “chain icon” and the second adds your image as a background image to the link element. You will have to go to Customize > Menus and edit that link I put in for Goodreads since I just used the base URL there.
If you look at the code I have given, you see the first part in the CSS selector, which is #menu-item-8389, that is the CSS id for the Goodreads menu item I added. You can find that for the additional social menu items you add using your web inspector. What you will find is something like this.
<li id="menu-item-8389" class="menu-item...The simplest way is to copy/paste the code I have given you and then just change the number (in this case 8389) to the number for the new menu item and replace the URL between the quote marks with the URL of the new image. Your icons should all be like the one for Goodreads which is 48px square so they fit into the area available.
-
If I put this in my browser, https://kjfarnham.com/, I go to your home page. If you click on that link, it should take you to your main page, which is “Home”.
-
Thank you! These instructions worked beautifully.
Two last questions: If you look at my site, the social media menu also appears at the bottom of the home page. For some reason, the three icons you helped me add in the top menu are still appearing as link icons at the bottom. Why is this? I tried to figure out if there was something I could change with the code, but I’m clueless.
Also, when I pull of my home page on my phone, the social media icons don’t appear on the mobile site. Is that just due to my theme? Or is there a way to add the icons to the mobile site?
THANK YOU!
-
Oh dear, it appears like if they display the same menu in two places, only one of them has the menu item ids. The bottom social menu doesn’t, but it is an easy fix. Replace the # at the beginning of all the rules with a period ( . ) and that will add your icons at both locations. Sorry for not noticing that there were social icons on the bottom too.
In your wp-admin dashboard, go to Appearance > Mobile and disable the mobile theme. With Dara, you don’t need that since it is a responsive design that displays properly on all screen sizes. Here is a direct link to that page in your wp-admin.
-
I have a similar request for the Dara theme social media icons. I have the last in my row of icons directing to my Contact page, but that displays the generic link icon. Is there a way to modify the CSS to make that one display the email icon instead?
-
Hi lindacassidylewis,
Could you start a new thread at the link below so we can help you with this directly?
https://en.forums.wordpress.com/forum/css-customization#postform
-
Sacred Path, can you please help me with centering the FOLLOW button in the sidebar of my blog?
-
Hi K.J.,
You can use this CSS for the follow button:
/* Center Blog Subscription Button */ .widget_blog_subscription { text-align: center; } -
-
Can someone please help me center these words in my sidebar:
“Subscribe to K. J. Farnham’s Newsletter”? -
Hi K.J.,
This should take care of it:
/* Center Newsletter Link in Widget */ #text-10 p { text-align: center; } -
- The topic ‘Need Help With CSS (Dara Theme)’ is closed to new replies.
WordPress.com Forums 