Widget CSS Customization
-
Hello! I am using the Triton Lite theme and i want to know if there’s a snippet for the following.
At the bottom of my main page there’s a set of social media icons with a title “Redes Sociales de vlogazul.com” is there a snippet to make the social media icons be next to that text title instead of being below that text?
The blog I need help with is: (visible only to logged in users)
-
Hi, add the following to get them on one line.
#wpcom_social_media_icons_widget-2 h3, #wpcom_social_media_icons_widget-2 ul { display: inline; } #wpcom_social_media_icons_widget-2 .widgettitle { padding-right: 20px; } -
It worked perfect, thanks.
Now, is there a snippet for the following. If you look at the bottom of the main page there’s a music player. Is there a snippet to decrease the spacing between the blue title text with that music player so they can be adjacent to each other?
-
It worked perfect, thanks.
Now, is there a snippet for the following. If you look at the bottom of the main page there’s a music player. Is there a snippet to decrease the spacing between the blue title text with that music player so they can be adjacent to each other?
-
Yes, add the following. I’ve set the top margin to 0, but you can set it to whatever you desire.
.wp-playlist { margin-top: 0 !important; } -
Thank you so much, you are so helpful.
Would there be a snippet for the following. Next to the navigation bar, there’s a text image logo that says vlogazul. Is there a snippet to make the navigation bar be aligned horizontally with that text? as you can see, the navigation bar is slightly above that text.
-
Great. For the image alignment, find this in your custom CSS and in the background string, change the second “center” to -4px so it looks like this.
#access #menu-item-15533 { background: url('https://vlogazul.files.wordpress.com/2017/03/sec-logo.png') no-repeat scroll center -4px /contain; width: 166px; height: 40px; } -
It worked amazing.
I just recently put my social media icons next to my last category page in the navigation bar. In any computer they look just fine and the way I want them but in the iPhone or mobile device it seems to interfere with some categories in that navigation bar. I uploaded a pic into my media library so you can see how it looks on the iPhone.
Is there a snippet to hide those icons from the iPhone or mobile device but for them to stay the way they look on the computer?
-
If you can add those social icons back in, I’m pretty sure it will be easy to hide them at 600px and narrower, or wherever they begin to interfere with the menu. Let me know when you have them added and I’ll work out the code for you.
-
Those social media icons still in the website. If you are signed in into your wordpress account, you can’t see them but once you logout and visit my website, they are still there in place next to the last category in the navigation bar.
-
Since we don’t have an overall container for overall site, we need to add an additional CSS rule to space the widget differently for those signed into WordPress to account for the top admin bar. Find this rule in your custom CSS
#wpcom_social_media_icons_widget-2 { top: 14px; right:85px; position:absolute; }and add this one directly after it.
.logged-in #wpcom_social_media_icons_widget-2 { top:45px; }Sorry I didn’t notice that before.
-
and would there be a snippet to fix those icons interfering the navigation bar on mobile devices as we talked about earlier?
-
This is a hard thing to do on a fixed width theme and have it work for all screens. The overlap on my browser starts at 1250px in width, so the mobile issue is only a part of it. You can try adding this at the very bottom of your custom CSS and see how this work.
@media screen and (max-width: 1250px) { #masthead .container #access { width: 860px; } #wpcom_social_media_icons_widget-2 { width: 75px; } } @media screen and (max-width: 1024px) { #wpcom_social_media_icons_widget-2 { right: 20px; } } -
You are a genius, it worked perfectly. I just had to adjust a little bit the name of my categories but it’s perfect.
If you look at the “Los Legionarios” category on the menu bar, you will see that there’s sub-categories under that but when you click on that “Los Legionarios” category it takes you to the category posts (there’s none in there).
Would there be a snippet to make that “Los Legionarios” category be non clickable so when you press that category it only takes you down to the sub-categories?
-
If Los Legionarios is not going to have any posts directly in that category, then remove that top level category menu item and add a Custom Link with Los Legionarios as the label and in the URL field, just put the hash tag symbol ( # ) which will make that just a heading in your menu.
We could make Los Legionarios not clickable, but if we did that, the submenu would not trigger and appear when someone hovers over it. Make the modification I suggest above instead.
- The topic ‘Widget CSS Customization’ is closed to new replies.
WordPress.com Forums 