This is a styling question for anyone who uses the popular Rhythm Theme for Wordpress. I would like to use the footer style of social icons in the header, but no matter how I fiddle with the settings I can't make it so. Here's what I want to achieve:
First, you have to have in mind you will have to change the header background color to have the same color behavior of the footer icons on top.
Second I don't think the person who designed the theme was planning to do what you have in mind, so probably you will have to create a child theme and change some css rules creating your own files.
Related
I’m using tagDiv's “news hub pro” newspaper theme for my wordpress site (as seen in the demo https://demo.tagdiv.com/newspaper_news_hub_pro/) and I see that the header is not sticky in the mobile version. How do I fix it? In the homepage template, I see the toggle to enable sticky menu for mobile but it doesn't seem to work.
Also, how do I make the top row sticky as well? This is the row that includes the logo, title, my account, search button, etc. Do I need to create a child theme and add my own CSS?
I am learning wordpress and using the siteorign corp free theme(https://demo.siteorigin.com/corp/) I want to be able to achieve the same design as what they have in their demo site. However, I am facing the challenge of setting the color for the navbars. The landing page comes with a dark background and the color of the navbar text is white, so you can see the text. However, the same text color is used for the other pages which are white, causing them to be invisible.
Please, how do I use different navbars for the different pages or edit the navbar for other pages without affecting the landing page?
Please create a child theme (https://siteorigin.com/corp-documentation/child-theme/)
and in the header.php file of your child themes check the condition for homepage or
not like this.
if(is_page('home')){
// call header
wp_navmenu();
}
else{
// call header with custom classes for styling
wp_navmenu();
}
Where do I edit the white space? Or in other words, where can I add more spacing/remove white spacing? It seems way too big for the website when I scroll down
Your theme probably has some CSS code that styles that part of the theme. It is usually in the file style.css, however it depends on the theme.
If there are no options in the theme's panel, there are two options (both require CSS code):
You can add your CSS rules through the administrator panel in Appearance > Edit CSS.
Or you can write a child theme and add some css rules that define the spacing in that part.
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
I am using the twitter follow us widget from https://twitter.com/about/resources/followbutton and I would like to change the color of the text. Right now the text is aqua blue which doesn't work well on my sites background.
Is there a way to override the styling inside the iframe? If so, how?
There's no way to modify the DOM or style of the content in an iframe. The best you can do is link to a different-styled iframe, as twitter offers both light and dark themes.
EDIT: That being said, there are several parameters in the <a> tag that can be used to customize the theme even further. Try modifying the data-button, data-text-color, and data-link-color parameters to your liking!