How to change the colour of the title text in a Visual Editor segment?

Hi Ken

To change the Title text colour and font for individual posts please navigate to Appearance->Custom CSS and add the following

.post-#### .entry-header h1.entry-title {
    color: #3b3b3b;
    font-family: "Times New Roman", Times, serif;
}

The post ID will need to be changed to the id number for the post you are changing.
Go to Posts in your WordPress admin, and click the post you need the ID of. Then, if you look in the address bar of your browser, you’ll see something like this

http://example.com/wp-admin/post.php?post=1280&action=edit

The post ID in the example would be 1280 so your Customm CSS would start with .post-1280

You can change the color to the hex value for your selected color. To get these you can go here

http://www.colorpicker.com/

You can change the font family to any websafe font from this list

http://www.tutorialrepublic.com/css-reference/css-web-safe-fonts.php

To Globally change the title colour and font navigate to Appearance->Customize.
From there go to Theme Design->Fonts.

Here you can change the Header Font and the Page Colour Title using a colour picker.

To change the background colour of the masthead navigate to Appearance->Customize.
From there go to Theme Design->Page.

You will be able to change the colour using the colour picker for Masthead Background.

Let us know how you get on

Magus

Hi Ken

Apologies for the misunderstanding.

To change the font and colour of the Title text for an individual Visual Editor Widget you will need to use your browsers developer tools.

On the page containing the Widget in question, right-click on the title text and select ‘inspect element’ from the dropdown menu.

When the developer console opens and finishes loading look a few lines above the selected one and there will be a line that looks like this.

<div class="panel-grid-cell" id="pgc-5564-1-0" abp="355">

We are looking for the id entry, in this case ‘pgc-554-1-0.

Navigate to the Custom CSS Editor and add the following

#pgc-554-1-0 .widget-title {
    color: #3b3b3b !important;
    font-family: "Times New Roman", Times, serif !important;
}

To do it globally will require you to do some advance preparation.

On the page editor, edit the visual editor widget and expand the Attributes section on the right hand side.
In the Widget Class type a name for your widget style, you will need to use the same name for all your visual editor widgets.

Then in Custom CSS you would put

.your-widget-style .widget-title {
    color: #3b3b3b !important;
    font-family: "Times New Roman", Times, serif !important;
}

replacing your-widget-style with whatever name you used in the previous step.

Hope this helps

Magus

Hi Ken

By the page editor I mean the screen that comes up when you navigate to Pages in your dashboard and select a page to edit.

If you want them to all look the same then you can just add the Widget Class attribute when you add your content to the widget, and then use the single piece of CSS I gave you at the end of the last post to control them all. If you want them to all look different then yes, you will need to add Custom CSS for each widget.

Hope this helps

Magus

Hi Ken

The best option is to just take the extra step and give the widget a common class name, it doesn’t take long as it is built in to the widget editing screen.

The single piece of CSS would then be entered in the custom CSS editor found at Appearance-> Custom CSS.

You could change the defaults but that could affect ANY widget from SiteOrigin that uses the Visual Editor plugin so I would not advise doing it this way, but if you had to you could use the following in the Custom CSS editor

.so-panel .widget_black-studio-tinymce .widget-title {
color: #3b3b3b !important;
    font-family: "Times New Roman", Times, serif !important;
}

If you wanted to set up several defaults then you can only do that by setting the widget class attribute to a default style class you create and have an entry for each within your sites Custom CSS described in my earlier post.

Hope this makes things a bit clearer

Magus

Hi Ken

I’ve checked all the plugins I am not already using and cannot get the same reaction in Firefox as you are. I think it MUST be a browser related issue, or even an issue with the pc/vga card in general. Do you have a public URL where the site can be viewed?

Magus