Jump to content

Archived

This topic is now archived and is closed to further replies.

PeterStephens

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

Recommended Posts

PeterStephens    0
PeterStephens

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.

 

Thanks  so much for your help!

 

Peter

 

Share this post


Link to post
Share on other sites
batman    389
batman

Hi Peter

If I understand about de DMS widget area

Please, you can try add in your Custom Code for example:

 

.widget ul {
    font-size: 14px;
    font-family: sans-serif;
    font-style: oblique;
}
 
I need clean me cache to see the change or relaunch de web.
You see the image
 

My exemplary code is not necessarily applicable as written, to your site, so please adjust accordingly.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

Thanks, Bat Learning! I'll give it a try.

 

Any thoughts on how the widget plugin DMS suggests (Custom Sidebars) can be assigned posts with particular categories in DMS, as it claims to do? 

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

Thanks, One Smart Egg. Here's what I've done so far at slowreads.com (click any blog post title):

 

WidgetFontStyleIssue01.jpeg

 

I've read a couple of ways of defining the font family on the cs3 school site, so I tried both of these with no luck:

 

.widgetheader {font-family:Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif"; font-size 18px;}

 

and

 

.widgetheader {font-family: Calibri, Candara, Segoe, "Segoe UI" ,Optima ,Arial, sans-serif; font-size 18px;}

 

Then, in my text widget, I put this:

 

WidgetFontStyleIssue02.jpeg

 

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
batman    389
batman

Hi Peter

Please, you can try with

 

.widget .textwidget {  display: none;}

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

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)?

 

Thanks again.

 

Peter

Share this post


Link to post
Share on other sites
batman    389
batman

Hi Peter

I can not see the photo

You can try add my code to your "Custome Code" , in this place (the code you see is another ;))

 

Captura%2520de%2520pantalla%25202013-07-


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

Thanks, Bat Learning.

 

I was able to fix my sidebar title fonts with this code:

 

.widget .widget-title, .widget .widgettitle {
    font-size: 20px;
    margin-bottom: 0.5em;
    padding: 3px 8px 3px 0;
    text-align: left;
}
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.
 
Thanks . . .

Share this post


Link to post
Share on other sites
batman    389
batman

Hi

Please you can try with

 

.widget ul {
    font-size: 14px;
    font-family: sans serif;}

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

Thanks, batman. I tried it this way (see lines 7 through 9 below):

 

FontProblem3.jpeg

 

It didn't change anything in the footer widgets, though, as you see here:

 

FontProblem1.jpeg

 

However, the first five lines of code above did make my sidebar widgets change very nicely:

 

FontProblem2.jpeg

 

I'd love to get my footer widget titles to look like my sidebar widget titles. I have the strange feeling that I'm missing something! :)

 

Thanks,

Peter

Share this post


Link to post
Share on other sites
PeterStephens    0
PeterStephens

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

Okay, lets stop and take a deep breath. 

 

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

Hello,

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
Rob    547
Rob

Margeaux7,  I'm lousy with screencasts. Apologies.

 

However, here's the docs page that will help:  http://docs.pagelines.com/tutorials/section-area-styling

 

You can see how the Styling Class is entered and then used in custom code.  Again, you do not add CSS to the class field. Only the class you want to create.

 

Go to the Styling Classes, add  mybluetext as written and nothing else.

 

Then, in Custom Code, you'd add

.mybluetext {color: blue;}

 

Then, you'll see the text in that section turn blue. Simple as pie.

 

However, if you add the custom code to the Styling Class field, it's incorrect, and DMS doesn't process anything. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • Anthony CALCI
      By Anthony CALCI+
      Hello,
      I have switched from the Framwork theme to DMS theme on http://calcipatrimoine.theproofingcompany.fr (miror site of http://calci-patrimoine.com).
      But I have now only the Primary sidebar in the Widget section ! Secondary sidear, Footer sidebar have all disapear...
      Can I have help to have them back ?
      Regards,
      Anthony
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
    • jeomiland
      By jeomiland+
      Hi
      I found this topic
      which talks about a similar issue I am having, but a little different. Hope someone can help me out.
      Best way to see the problem is to view http://cassclayton.com/ on Safari (Mac) compared to Firefox or Chrome. You will see the banner just under the fixed menubar has a gap between the menubar and top of the banner. Looking at Inspector, I found:
      <div class="fixed-top-pusher" style="height: 62px;"></div>
      <script> jQuery('.fixed-top-pusher').height( jQuery('.pl-fixed-top').height() ) </script>
      and indeed it seems the jquery is not always working consistently. For instance, if you simply refresh the page in Safari, it will loose the gap and all looks fine, so is it a browser cache issue that is interacting with the jquery? I do have W3 Total Cache installed. There must be a way to tell the code to make sure jquery is up and running and available to do it's majic?
      And perhaps there is just a better way to do this banner? Originally I tried several DMS sections and used the banner image as background, etc... Kept running into problems with resizing and the left/right parts of the image were getting chopped off. It is important the whole image show, so currently I just use a NextBox section with this code:
      <img src="[pl_site_url]/wp-content/uploads/2015/12/CassClayton-blues-tribute-banner.jpg" width="100%" />
      and it looks the way it should. Is there a better way to place a banner graphic under a fixed navbar and make sure the whole banner graphic displays regardless of screensize?
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
×