Widgets CSS Customization

vlogazul · Member · Aug 1, 2015 at 12:44 am
Copy link

Add topic to favorites
Hello, I am using the expound theme and I want to know if there’s a solution for the following snippet.

I recently added my social media icons and the search bar widgets to the top right of my page using the css snippets. I don’t have much experience so since I played with it a little bit I was able to put them on the top right. In some computers it looks perfect positioned but I just recently noticed that on a big screen computer the search bar seems outside the page and not aligned with the end of the page. Is there a solution for that? Did I do something wrong in the snippet? Thanks, any help would be appreciated to fix the issue.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 2, 2015 at 2:19 am
Copy link
Hi, if we set the #page div to position: relative; then any div within that main parent div that has a position declaration of relative or absolute will stay within the parent div. Add this to your custom CSS
```
#page {
    position: relative;
}
```
and then modify the two rules you used to move the widgets to what I have below.
```
#search-5.widget.widget_search {
    position: absolute;
    right: 0;
    top: 40px;
}
#wpcom_social_media_icons_widget-2 {
    position: absolute;
    right: 170px;
    top: 45px;
}
```
You can play with the right and top values to get things aligned as you desire.
vlogazul · Member · Aug 2, 2015 at 7:57 am
Copy link
Thank you very much.

Is there a snippet for the following.
If you take a look at the Expound theme live demo, you will see that the 4 category posts below the featured post in the main page have a category link black square with white text that is attached to the image. Is there a snippet to do the same thing to my images of the posts that are below my featured post but only on the main page?
ehtis · Staff · Aug 2, 2015 at 6:06 pm
Copy link
If you take a look at the Expound theme live demo, you will see that the 4 category posts below the featured post in the main page have a category link black square with white text that is attached to the image. Is there a snippet to do the same thing to my images of the posts that are below my featured post but only on the main page?

You don’t need a snippet for that at all! They’re just featured posts, Expound supports up to 5 featured posts, first is displayed at the top and the other four below that.

Those four featured posts, below the top post, will automatically show assigned category links with black textbox/background, if a featured image is set for them.
vlogazul · Member · Aug 2, 2015 at 6:52 pm
Copy link
Of course, once I make the featured posts sticky it appears, but since I don’t want to make the 2 posts below the featured post sticky. Is there a snippet just to make them have that category square?
ehtis · Staff · Aug 3, 2015 at 9:22 am
Copy link
Personally, I don’t think it would be possible.

1. First, those categories are dynamically generated through a backend function and applied on those 4 featured/sticky posts.

2. Second, CSS is for styling and isn’t generally used to add content, but pseudo-elements can still be used to add small adjustments, like constant text in some cases.

That’s why, I don’t see a way those category thumbnails can be added to other posts. Let’s see if other volunteers/Staff have a different opinion and a way to do it! :)

No items found.