Download all Joomla templates including quickstart (demo)only $24.99

Forum

Important - Hands Up!

- Please ask using the account with which you made the purchase or download of our products and in its respective category.
- If you bought our products in another market, ask your questions in that market, not here.

* ADD PRODUCT NAME IN START OF SUBJET

LawStudio - Change Box Style

  • S
  • sis2018 Junior Member
  • Topic Author 4 years 8 months ago #1
Hello,

In the LawStudio template, there are boxes with border radius at top-left and bottom-right corners (see prnt.sc/qt9p6e )

How to edit and the style and remove the border radius? can I make it in custom.css

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 4 years 8 months ago #2
Yes you can do it from custom.css.
Use your browser's inspector to identify the tag and the class that border radius has. Add that class to custom.css give it the value of border-radius: 0! Important;

regards

Please Log in or Create an account to join the conversation.

  • S
  • sis2018 Junior Member
  • Topic Author 4 years 7 months ago #3
Hi,

Thank you very much for your kind advise.

Hwever, I have tried to follow your suggestion, but the border corners are still rounded prnt.sc/r4k9ec

Could you please advise me futher on this issue.

Thank you very much for your kind help.

Best regards,
Suryana

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 4 years 7 months ago #4
If you see in the developer tools of your browser you only see the border-radius attribute that you added. That means you didn't find the right tag or class in which we add the border-radius: 6px 0;
Before making any changes you have to find the class that has the attribute and the value you need to change. In this case, the border-radius was applied to the IMG tag that is within the .practices-image class that you modified.

You must change the border radius in the following:
Code:
.practices .items-row .item-ct .item .practices-image a img{YOUR CSS ATTRIBS AND VALUES HERE}
Practice finding the class or tag to modify and don't change because I told you where to change.

Regards

Please Log in or Create an account to join the conversation.

  • S
  • sis2018 Junior Member
  • Topic Author 4 years 7 months ago #5
Hi,

Thank you very much for your kind advise, it works well. (see prnt.sc/r51vq5 )

But, the custom.css I made applies only for Blue Template color. How to make the custom.css to work for another template colors?

Thank you,
Suryana

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 4 years 7 months ago #6
This should work for all colors, since only color variables are changed in color files.

Tip: If it doesn't work you can add the! Important clause to the value of your attribute in your css. or divide practice at the beginning. These changes make the browser choose your customization.

Please Log in or Create an account to join the conversation.

  • S
  • sis2018 Junior Member
  • Topic Author 4 years 7 months ago #7
Hi,

I have followed up your advice and got successful results.

Except for the "send message" and "back to top" buttons which seem have the same class name (see: prnt.sc/r5qm2e )

What I want is that the "border radius" value of the "send message" button is: 0! Important, while for the "back to top" button is: 50%. How to do so?

Thank you very much for your further help in this issue.

Best regards,
Suryana

Please Log in or Create an account to join the conversation.

  • L
  • leoalv Moderator
  • 4 years 7 months ago #8
First of all I recommend you read or watch a CSS course to differentiate classes, it will help you a lot in the future.
The btn, btn-primary, button classes
The btn class applies to all buttons, the btn-primary class is used to give primary color to the buttons (We use bootstrap and it has classes like btn-success, btn-danger, btn-info, to color the buttons.Then if you directly modify the values it will change throughout the site.

The solution is to change their values by selecting a parent class or tag.
To change the radius of all the buttons on your entire website you can use
Code:
body .btn{border-radius: 0!important;}
For example to change the inputs you can use
Code:
body input{border-radius: 0!important;}
Now if for any reason within the section you want to use radio for the inputs, you just select the parent class like this (for example we will change the radius of the form mod_ut_contact_pro):
Code:
.ut-ctc input{boder-radius: 4px! important;}
Regards

Please Log in or Create an account to join the conversation.

  • S
  • sis2018 Junior Member
  • Topic Author 4 years 7 months ago #9
Hi,

Thank you very much for your great advise.

Now, I can solve the issues prnt.sc/r5yfy2

Best regards,
Suryana

Please Log in or Create an account to join the conversation.