Colinear Theme Help

  • Unknown's avatar
    lee0593 · Member ·

    I would like to make a few changes if possible. I want to change the color of the page title and the website title also add the tagline for mobile view. The last thing is to align the site logo next to the site title and tagline.

    The blog I need help with is: (visible only to logged in users)

  • karenlattfield · Staff ·

    Hi there,

    If you have either the Premium or Business plan you can modify CSS in the Custom CSS editor, by going to your My Sites tab then clicking on Customize and choosing CSS: https://en.support.wordpress.com/custom-css/

    You can achieve most of what you want to do this way.

    To change colours you can first find the hex code for a colour that you want using a site such as https://htmlcolorcodes.com/.

    To change the site title colour (using blue as an example): 

    .site-title a {
color: #0000FF;
}

    To change the page (and post) titles: 

    .entry-title {
color: #0000FF;
}

    If you just want page titles changed, you could instead add: 

    #page .entry-title {
color: #0000FF;
}

    Regarding the site description, if you were wanting it visible on mobile screens as well as desktop you could add the following CSS which should override any media queries: 

    .site-description {
display: block;
}

    To align the the site title and tagline next to the logo (except on mobile devices) cleanly, you would really want to wrap the site title and site description p tags in a parent (div) tag. You would need theme file access to do this though which is not possible within WordPress.com hosted sites.

    I hope this helps?

  • Unknown's avatar
    lee0593 · Member ·

    Is it possible to add social media Icons across from the main menu?

  • karenlattfield · Staff ·

    Hi there,

    Yes you can do that, with a good bit of custom CSS, again in the Custom CSS editor as above. What you would need to do is add your social media links as Custom Links in your main navigation menu. There is an explanation on how to do that here: https://en.support.wordpress.com/menus/

    You can set the navigation label for each social media link to be something very short as you will hide it and cover it with a social media icon with CSS. So, F for Facebook as an example.

    You then need to find the ID of the menu item in question. To find the ID you can left click on top of the menu item and choose ‘Inspect’ (depending on your browser – this is the process in Chrome). Your Contact menu item ID is #menu-item-1536, so I will use that as an example.

    You can then either upload an image or icon you’d like to use for each social media button, or find an image online – the background-image in the example below is just an icon found online.

    Then in your Custom CSS editor you would add the following (this is to add a Facebook icon):

    @media screen and (min-width: 864px) {

#menu-item-1536 a {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/1000px-F_icon.svg.png");
background-repeat: no-repeat;
background-size: 30px;
background-position: 12px;
}

#menu-item-1536 {
color:transparent;
float:right;
}

#menu-item-1536 a:hover {
color:transparent;
}

#menu-item-1536 a:active {
color:transparent;
}

}

    You can then repeat this for any other social media icons.
    I hope this helps.

  • karenlattfield · Staff ·

    That should be right-click not left-click if you are using a mouse to select the menu item, to check the ID. Otherwise, here is a link on how to access the developer tools from different browsers.

  • Unknown's avatar
    lee0593 · Member ·

    How can I add other social media Icons such as Twitter and youtube also changing the color of the widget’s title. Can I take off the line marks on the widgets? One more thing is to change the color of the main menu.

  • Unknown's avatar
    lee0593 · Member ·

    After adding the social media Icon the contact menu tab has disappeared, how can I get it back?

  • kathrynwp · Staff ·

    First, a big thank you to forum volunteer karenlattfield for working out all that CSS for lee0593!

    The easiest way to add social icons is to use the widget – I’d suggest checking out that method instead of adding them to the menu:

    https://en.support.wordpress.com/widgets/social-media-icons-widget/

    Can I take off the line marks on the widgets?

    If you’re referring to the thick black horizontal lines on top of each widget, this CSS will remove them:

    /* Remove top border on widgets */
.widget {
  border-top: none;
}

    One more thing is to change the color of the main menu.

    Can you explain more which colours you’d like to change? For example – top-level menu text colour (currently black), top-level menu background colour (currently black), sub-menu text colour (currently white), sub-menu background colour (currently white). Once I know which colours you’re looking to change, I can help you with the code.

    Also just a heads-up that since your site has a Premium plan, you’re entitled to live-chat and email support, accessible here:

    https://wordpress.com/help/contact

    You’re welcome to still post in these forums, but those other support avenues may be faster, and you’ll always get a staff reply.

  • karenlattfield · Staff ·

    Hi lee0593,

    Yes your contact menu item would have disappeared if you used the exact CSS as above, as that was based on the ID of the Contact menu item. You would have to create new menu items, and find the ID using your browser’s developer tools as above.

    Adding more social media icons in the menu would be done in exactly the same way – use the same CSS but with the ID for the new menu item.

    As kathrynwp said you may find it quicker to use live chat, but if you wanted to respond here you could always create some new menu items and I could find the ID’s for you, so that you can have the specific CSS you need.

    Having said that I see you have changed your theme, so I imagine you are not wanting your social media icons to the right of your menu any more as that wouldn’t work now. As kathrynwp mentioned, adding social media icons to a widget is a lot easier, but if it isn’t what you want there are usually other options available with a bit of CSS creativity.

    Thanks kathrynwp for jumping in :)

  • Unknown's avatar
    lee0593 · Member ·

    Thank you for helping me. I have a couple more adjustments I want to make. First, I want the site tagline under the site title.

  • kathrynwp · Staff ·

    Here you go:

    /* Put tagline on its own line */
.site-description {
  display: block;
}

    If you need further CSS help and want to keep using the forums, please start a new thread in the CSS Customization forum. Thanks!

  • The topic ‘Colinear Theme Help’ is closed to new replies.