CSS changes in DMS widget areas; sidebar plugin interface with DMS

Recommended Posts

PeterStephens
0

PeterStephens 0

What tags should I use to effect changes to font types and sizes to any DMS widget area? .sidebar doesn't seem to work in the CSS space. Also, when I create a sidebar in the sidebar plugin the theme suggested, it doesn't have any mechanism for assigning a category to it as it suggests it is able to do. Therefore, none of the sidebars I create using the plugin show up in the markup area.

Share this post

Link to post

Share on other sites

Rob
547

Rob 547

Peter, the Visual Editor (accessible by going to your site in Chrome, lets you select a section to edit. When you do, likely you'll see a field called "Custom Class" or something like that. In the Custom Class field, you can add a custom class. This will then be applied specifically to that section only. You then create your CSS to match. You can also add a custom class directly into text widgets.

In the custom class field, you might add my-red-text or in the text widget, you might try <div class="my-red-text"> your text </div>

Then, in Custom Code you'd add something like

.my-red-text {color: red;}

And on saving, your text will turn red in that section or text widget only. Of course, you can apply custom code to most anything.

I've been on this for two hours on the excellent w3schools.com site (I'm a pitifully slow learner), but can't make it go.

What I'd really like to do -- the extent of my customizations -- is to learn how to change the fonts on my widgets, both headers and body, particularly the font families and sizes. (I would like to assign widgets to certain blogs automatically by blog category as I was able to do on Genesis, but that's a different subject.) (I'd love to learn how to get better at CSS, but my 70-plus-hours-per-week job won't permit it.) I really like the simple promise of the DMS interface to customize CSS for particular sections.

Share this post

Link to post

Share on other sites

PeterStephens
0

PeterStephens 0

Bat Learning, thanks. Do you mean that I should use those terms -- .widget and .textwidget -- instead of .widgetheader? I thought in Rob's example above (.my-red-text), it didn't matter what I called it so long as I used the same term in my widget's text field. Is that not so, or do I need particular names in the Styling Classes field (see my photo above)?

But, even using Firebug, I was unable to identify what class is controlling the fonts in my footers. I'd like to turn them to a sans serif and to make the titles bigger than the body. (I've been unable to define any of my own classes using the custom class field. It disappears when I refresh.) I'm using the columnizer section in the footer of slowreads dot com.

Share this post

Link to post

Share on other sites

PeterStephens
0

PeterStephens 0

By the way, while I've been working on my font issues, I did figure out the interface with the sidebar plugin. How cool. I also think the docs for DMS are extremely well done and helpful. The whole DMS design thing is proving to be a lot of fun.

And any help on this CSS font issue would be appreciated. Thanks, everyone.

Share this post

Link to post

Share on other sites

Rob
547

Rob 547

In the place you said you defined your class, you made the mistake of adding your CSS. Let me be clear, the CSS does not go there.

The purpose of the field is to create a new class. So you'd put something like mynewclass in there (no spaces, only dash or underscore for punctuation.

Then, where it says "Custom Code" in the DMS menubar, you can define the custom class you created. Something like .mynewclass {border: 1px solid red;} You'll see the mynewclass now has a period in front of it, telling the browser this is a class, and then the actual styling is applied (in this example, a red border of 1 pixel, with a solid line). This is why it's important to take the time to read the documentation -- an important, but obviously skipped step.

When you add CSS to the class field, you'll see absolutely no change in your site. But, do it enough and you'll get one big effect - crashing your site. Likely, when someone asks us why that happened, we're going to say something unpleasant.

So, take the CSS out of that class field, use it properly, and read the docs. That's what they're written for -- seriously. http://docs.pagelines.com.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post

Share on other sites

margeaux7
3

margeaux7 3

This was a great post but you need to understand that you are a "calculus" instructor speaking to people that have just mastered fractions. Please share with me where in the docs it tells you where to put what. How would I possibly know to take the CSS out of the class field? I don't even know what that means unless you show me.

A simple screen shot would be wonderful.

Surely there is a 1 minute screencast you could do to address this: When you add CSS to the class field, you'll see absolutely no change in your site. But, do it enough and you'll get one big effect - crashing your site. Likely, when someone asks us why that happened, we're going to say something unpleasant.

So, take the CSS out of that class field, use it properly, and read the docs. That's what they're written for -- seriously. http://docs.pagelines.com.

Share this post

Link to post

Share on other sites

Similar Content

Hi,
I am hoping to figure out how I can get my PageLines Full Nav to display layered in front of a sticky footer element on my website - 3keymedia.com
I would like the Full Nav to overlay the entire screen when opening the menu as you will see when opening on a desktop the footer of nav content is cropped by the sticky footer.

Hi everyone, since Instagram had allowed to publish in different ratio formats (instead of only square ratio) the grams stripe has different heights. Can you tell me if i can fix it easily with some CSS?

Hi guys!
I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
See:
https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues.
@media only screen and (max-width: 993px) {
/* hide sidebars */
.plsb {
display: none !important;
}
}
I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?

The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
Is there a fix or workaround for this?
Thanks
Michael