Helo with CSS Code for Oxygen Theme

nboufawaz · Member · Mar 7, 2014 at 1:24 am
Copy link

Add topic to favorites
Hi there! I’m new here and new to CSS. I’ve managed to make a few changes based on the information I found on this forum which is awesome, but I’m still missing a few things.

I’ve managed to move the share buttons to the top of the post, and not just the bottom, but I’d also like to move them to right side of the post, and not the left where they currently are and I’d like to change the icons and use the same icons I’ve used for my social media “follow me” buttons.

Secondly, I’ve added a header with my site name/logo, and i’ve disabled the site title and tagline, as the title is redundant. However, i’d like to keep the tagline but the only problem is that is appears above the header. Is there a way for me to move it to below the header and modify the font?

Also, I’ve added a custom menu to the left sidebar, but I don’t like the bullets. Is there a way to replace them with an image I’ve downloaded?

Thanks in advance!
Nissrine

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 7, 2014 at 6:07 pm
Copy link
Hi, for the sharing, change width in the following in your custom CSS to 0 and then add the “right:0;” declaration. You can then use the top value to adjust the position of the icons.
```
.single div.sharedaddy {
    position: absolute !important;
    top: -5px;
    width: 0;
    right: 0;
}
```
For the tagline/description, go back and activate the title and tagline display and add the following CSS. It hides the site title via CSS and moves the tagline down below your logo image. You can play with the font size and color as desired. I used red just for visibility and demo purposes.
```
.site-title {
    clip: rect(1px, 1px, 1px, 1px);
}
.site-description {
    position: relative;
    top: 115px;
    font-size: 110% !important;
    color: #CC0000;
}
.main-navigation {
    margin-top: 40px;
}
.menu-toggle {
    margin-top: 30px
}
```
For the bullets, add the following and insert your image URL between the quote marks where it says URL_OF_IMAGE. You may have to adjust the left margin value.
```
.widget_nav_menu ul {
    list-style-image: url('URL_OF_IMAGE');
    margin-left: 25px;
}
```
Note that I have specifically targeted the custom menu widget, so this will not affect any other widgets.
nboufawaz · Member · Mar 8, 2014 at 10:21 am
Copy link
Hi! Thanks so much. I’ve managed to move the tagline below the header, but I can still see the title. It’s not hidden.

Also, is there a way to change the font type on the tagline to match the font type in the sidebar titles?

Now that I have the share buttons where I want them to be on the posts pages (top right hand corner), I’m wondering if you could help me with the CSS code to change the icons. I’d like to use the same style and size of icons that I’ve used for the “Follow Me” section in my sidebar (under Social Harmony), to maintain a consistent look. Is this possible? FYI: I’ve already tried doing this through the Add New Service function under Settings->Sharing, the icon doesn’t come out right, it’s either too big and cut off or when I reduce the size to 16×16 pixels as suggested, it comes out with a background and appears in black and white on my ipad and in colour on my desktop.
andrewspittle · Staff · Mar 12, 2014 at 8:45 pm
Copy link
Also, is there a way to change the font type on the tagline to match the font type in the sidebar titles?

Yes. You’d need to add this tidbit to your custom CSS:
```
h2.site-description {
font-family: sorts-mill-goudy-1, sorts-mill-goudy-2;
}
```
siberiainmyroom · Member · Mar 13, 2014 at 4:02 pm
Copy link
Hi! I write here, because I have a very similar problem. I want to remove the bullets under categories (the circles) I want to put a bar like this: ” – “
What should I do?

Thanks a lot!
siberiainmyroom · Member · Mar 13, 2014 at 4:04 pm
Copy link
I forgot to put my blog so you can check and help me:

http://itsnotallabout.com/

Thanks again!
thesacredpath · Member · Mar 14, 2014 at 4:16 am
Copy link
@siberiainmyroom, add the following CSS to get rid of the circle bullets in the widgets and shift the text back to the left, aligned with the widget titles.
```
.widget ul {
    list-style: none outside none;
    margin-left: 0;
}
```

No items found.