Public Forums 71,145 posts

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#199380

I have started my site using the Purity III QuickStart Package. The Readmore button is a little bigger than I would like so would like to change default to either …
1. a small rounded button with a different colour (such as <a class=”btn-sm btn-warning”>), OR
2. a label with a different colour (such as <a class=”label label-warning”>).

However, I can’t locate class in any CSS file to update.

Any help appreciated.

Cheers,
Mal.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#541101

Go to this File: templates/purity_iii/css/bootstrap.css

Find this code


.btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 0; }

you can search for these terms in that css file

label-warning

label

btn-warning

btn-sm

Find these css you can change the css of that class

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#541116

Hi Chavan:

Thanks for the feedback; however, my question was regarding *how* to apply this Class to the default ‘Readmore’ button so it looks like a small round button or a tag?

Rgds,
Mal.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#541128

may be you could show me the existing read more in your site . I’m asking for your site Url.

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#541130

Hi Chavan:

An example page on the site is located at http://mynorthernbeaches.cloudaccess.net/directory/residential. Look for the ‘Readmore’ button under the ‘Electrical3’ entry.

Disclaimer: this site is in development at the moment, while we “play around” with formatting … all care, but no responsibility! 😀

Rgds, Mal.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#541157

If you want a button like the image attached

Add this code to /templates/purity_iii/css/custom.css

.readmore .btn-default {
background-color: #ff8800 ;
border: 0;
color: #fff ;
font-weight: bold;
line-height: 1;
}

---

Attachments:

1. 

1 user says Thank You to chavan for this useful post

1. malibu63

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#541167

Many thanks for pointing me in the right direction Chavan … it worked perfectly!

With a bit of extra markup, I’m getting closer to my goal … take a look!

Ideally, I’d like to get the Readmore button right-justified, but tha can be my project for another day 🙂

Best regards,
Mal.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#541318

I think you have already fixed the right justified for the button on this page http://mynorthernbeaches.cloudaccess.net/directory/residential

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#541962

I think I’m close, but not behaving well in other templates or in Article view.

Will keep trying … :((

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#542071

may i know which page this css doesn’t work. please post the Url

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#544117

Hi Chavan (sorry for delay) …

It’s behaving a little better now that I have put a ‘clearfix’ around the links component.

Cheers.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#544142

glad, Is there any more fix needed there ? If so please post with a screenshot

[Author]

Posts