rounded text boxes and media boxes

[Frederic 3]

Hi there!

 

I have searched the forum but didn;t find what i want.

 

I want to have some text boxes and media boxes with round corners.

Does someone know what to insert in custom css?

 

I assume this can be achieved by adding a class in css and adding it in styling in the text box and media box sections .... but no idea how we create new classes - can you point me to a place where I can learn that?

 

Thanks

[Erwan 37]

Hi Frederic,

I assume you use here the built-in "DMS Customize Options" method (vs. child theme method for instance: see DMS "How to Customize" doc). Yes indeed, you have to define a "rounding" class in the DMS toolbar → </> Custom → Custom LESS/CSS area, and then apply it to some sections you choose by adding your "rounding" class in their Sections Options → Styling Classes area.
 

Here, create a class named rounded (or whatever):

.rounded {
    border: 1px solid @blue; /* If no border, the CSS 3 radius property won't show! */
    .border-radius();
}

This styling class you created can be applied right away to many DMS sections including those you mentioned.

 

It uses the DMS build-in .border-radius() LESS mixin (see DMS "LESS" doc).

By default, it adds a 5px radius to all corners, i.e. .border-radius() is the same than .border-radius(5px).
You can of course have different radius values for top-left/top-right/bottom-right/bottom-left corners: e.g. .border-radius (50px 10px 30px 20px).
Last but not least, you can use here DMS core variables (see LESS doc above) instead of px: @baseBorderRadius = 4px, @borderRadiusLarge = 6px and @borderRadiusSmall = 3px.

Hope it's clear/it will help, and I remain at your entire disposal if you encounter any difficulties.

 

[Frederic 3]

If it helps? Thanks a bunch Erwan! It rocks!

 

I have added

 

 

.rounded {

    border: 1px; /* If no border, the CSS 3 radius property won't show! */

    .border-radius(5px);

}

  

I had to remove 'solid blue' because it was not allowing any change after the first border-radius px value had been set - the corners were stubbornly remaining in the same state whatever the px value.

 

Hope it is ok.

 

Many thanks again. I was a bit disappointed by the forum but that raises the bar!

 

:-)

 

Would love to ask you more questions but I guess the rule 'one topic per thread' applies here ...

[Erwan 37]

Hi Frederic,

Great and thanks for your feedback.
 

I had to remove 'solid @blue' because it was not allowing any change after the first border-radius px value had been set - the corners were stubbornly remaining in the same state whatever the px value.

 

This is doubly weird:

• None of the border properties will have ANY effect unless a border-style property (solid, dotted, groove,..) is set.
• There is absolutely NO reason for the border-style and border-color values to "freeze" the border-width value.

I suspect you might have not saved and/or refreshed properly your tests to come to this incorrect conclusions...

Please note: there's a current bug in DMS (v. 1.1.4) which prevents under various circumstances changes in resp. the editor custom LESS/CSS area, and the sections syling class area, from saving in a proper way. Cumbersome but simple trick: if you make any kind of changes in those areas, then click outside of the area to initiate a save, before publishing, and double-check your changes are correctly saved after publishing.

 

Would love to ask you more questions but I guess the rule 'one topic per thread' applies here ...

 

Would be glad to help if I can, but yes please open another topic if the question is not directly related.
 

 

[Frederic 3]

Hi Erwan,

 

Thanks for the reply.

 

Yes, maybe a save issue - I do have a lot of problems with them.

 

I do the trick of clicking another box and saving 2-3 times before I refresh and publish, yet it sometimes takes 2 or 3 attempt to get the changes saved

 

THanks for your support!