[Stephanie PParticipant]

Hello,
I’ve been trying to use the optional inline css to change the background or font of individual elements and containers, but typically it has no effect– and sometimes it instead posts random bits of code on the screen. Is there a tutorial for using the inline css?

A specific example: I attempted to use the code mentioned in this thread to change the background of my “Announcements” column so that it would stand out from the rest of the content band. It didn’t change the background; instead, it caused "] to be printed at the top of the column.

I imagine I’m making a fairly basic novice mistake, but I’ve tried so many things to fix it now that I can’t even catalog them. Sorry that I can’t post the URL; I am making a site for a school department that requires me to “authenticate” the site before publishing it. Thank you in advance for any help.

[SupportMember]

Hi Steph,

I recommend you use the Custom CSS of your Customizer, you can check out the video tutorial of how it works here: http://theme.co/x/member/kb/customizer-custom/

Thanks!

[Stephanie PParticipant]

Hi Support,
Thanks for pointing me to that tutorial! Unfortunately, it didn’t solve my problem, since I wanted to change the style of a single element on a single page. I really just wanted to know what I was doing wrong with the inline css feature, since I intend to use it quite a bit.

For the benefit of anyone searching this forum who is new to the theme or css and having trouble figuring out the inline css feature, the format should look like this:

color: #fac934;

(In the style field of a headline, for example, this changes the font color.)

background: #b0c4de;

(In the style field of a column, for example, this changes the background of all parts of the column that have elements in them.)

This is different than the css format you use on the customizer, which (of course) needs you to point out what feature requires alteration:

.h-resp {
  color: red;
}

This probably seems obvious to X’s many experienced users, but it’s a bit of a missing stair to the many of us who are figuring the whole thing out by trial and error. 🙂

Thanks again for this fantastic theme. I’m happier and happier with it as my learning curve progresses.

[SupportMember]

Hi there!

Thank you for sharing this info about the css inline style. I’m sure this will help a lot of users stumbling on the same issue. If you haven’t done so yet, definitely take some time to review all of our resources in the Knowledge Base as a lot of setup questions like this are already covered in there and in much more detail than we can provide here. We include documentation, numerous helpful articles, and dozens of videos, which go over many aspects of the theme. If you find you still have a question after taking the time to thoroughly go through all of these materials, don’t hesitate to let us know and we will be happy to assist you.

Cheers!

[Russel DParticipant]

Aaaaaaaaagh. I have looking for this everywhere. Please can you give more eamples.

[AlexanderKeymaster]

Hi Russel,

Could you please open your own topic for this? We can give more examples if you provide a link to your site, and give us an idea of what you’re looking for.

[KoryKeymaster]

Hey Russel,

Thanks for writing in! As stated in Stephanie’s response, when utilizing the style attribute on the shortcodes to add inline CSS it behaves just like a style attribute on an HTML would work. For instance, when you use this attribute on the [button] shortcode like so (simplified for demonstration purposes):

[button href="#" style="font-size: 18px; color: blue;"]Click Me![/button]

It outputs the following:

<a href="#" class="x-btn" style="font-size: 18px; color: blue;">Click Me!</a>

It is a standard practice that all inline CSS be added in this manner. The selector and curly braces are left out because there is no need to select an element, you can only add styling to this one particular element. This is different from targeting an element with styles in an external stylesheet or within the <style> element on a page, like so:

<style type="text/css">
  .x-btn {
    font-size: 18px;
    color: blue;
  }
</style>

Again, the difference here is that you would be targeting all button elements throughout your site instead of just one button using the inline style attribute. There are plenty of articles and resources available online that explain the nuances of using these different implementations of CSS in more depth if you should need further help on this matter.

The other thing to be aware of is where the style attribute is being added with a shortcode’s output. Some shortcodes contain many layers of elements, like so:

<div class="outer-element">
  <div class="inner-element">
    ...content here...
  </div>
</div>

The style attribute might not be added to the specific element that you’re trying to update in a shortcode. For instance, using our example above using the style attribute might add it to the outer-element when what you really want to style visually is the inner-element. Remember that inline styling can only style that specific element, it cannot be used to style other elements within that element like the external CSS a couple examples ago. If that is the case, you’ll need to target that element’s class or add a unique class and target it that way and make sure that you inspect the page to see where the style attribute and classes are getting output. You can easily do this in Chrome by right-clicking the element in question and selecting Inspect Element, which will bring up a popup at the bottom of your screen with HTML markup on the right and CSS on the left. You can use this screen to zero in on an element and see how it is structured and where things are being output to make better decisions on how to implement your CSS (i.e. inline vs external, et cetera).

Hopefully this helps to provide some more clarity on this matter for you, thanks!

[jenzac1Participant]

In one of the threads above you said: “Thank you for sharing this info about the css inline style. I’m sure this will help a lot of users stumbling on the same issue. If you haven’t done so yet, definitely take some time to review all of our resources in the Knowledge Base as a lot of setup questions like this are already covered in there and in much more detail than we can provide here.”

Could you please point me to the location in the Knowledge base where inline styles are talked about in more detail? This is something I’ve been struggling with as well however I have not found anything in the KB.

[SenthilMember]

Hi There,

Thanks for writing in!

Our Knowledge Base explains and helps you to setup & use the X theme. It helps you to understand the X theme and its features better.

If you’re looking to learn basic CSS, there are very useful tutorials are available such as the one on w3schools.com.
http://www.w3schools.com/css/css_howto.asp

You can learn and apply to the site and if you face any issues on making them work with X, you can open a thread and we will be happy to help you to fix it.

Thanks!

[Author]

Posts