Service icons bigger (& "reverse" print)?


#1

Hello,

how can I change the service icons to a “reverse printing” & also the icon title in bold and some colour - so make it look like in the MOESIA or WEST theme ?

Thanks & all the best,

Michel


#2

Sorry:
I am talking about SYDNEY theme


#3

Hi,

Please post a link to your website, to the page where you want to change the icon and point out which icon you want to change.

Best Regards,
Csaba


#4

Dear Csaba:

http://www.academialia.es/

Directly on the home, just below the head slider I have icons for example: it is the icons from the Sydney Theme widget ServicesA

Thanks


#5

Hi,

Please check out this video from the documentation, you can see there how to change / add the icons to Services: https://www.youtube.com/watch?v=9vFQEASs6OU

Best Regards,
Csaba


#6

Thanks Csaba,

I’ve seen the video before, very good and easy explaining.

But I want to change the Appearance of the icons: make them BOLD…and also the Title of the Icon I want to have in bold.
Like in your WEST theme: the appearance of the icons is different than in Sydney theme.

Can I easily change only the icons appearance to West theme?

Thanks in advance.

With best Regards,
Michel


#7

For example on my site www.academialia.es the 3 icons: Comunicación…Tutoriales…Ayuda deberes… (just below the head slider)


#8

Hi,

You can have a similar icon style like in West Theme and make the title bold, with this Custom CSS:

.roll-icon-box .icon {
    background: #1b81e5 !important;
    border: none !important;
}

.roll-icon-box .icon i {
    color: white !important;
}

.roll-icon-box .content h3, .roll-icon-box .content h3 a {
    font-weight: bold !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba


#9

Thanks Csaba, this is working !

But it changes only the Services Type A, not my Type B style (which I use besides the iPhone image).
How can the title below the Icon text be bigger Font size ? (Comunciacion - Tutoriales - Ayuda Deberes for example)

Thx & best Regards from Barcelona,

Michel


#10

Hi,

You can change the type B icons the same style too by adding this Custom CSS too:

.list-item .icon {
    background: #1b81e5 !important;
    border: none !important;
}

.list-item .icon i {
    color: white !important;
}

Please let me know how it works.

Best Regards,
Csaba


#11

Perfect Csaba, thanks.

What about the title/headline below the services: How can I make the font size larger ?
On my page www.academialia.es you see tghe first services below the head slider saying COMUNICACION…it is in bold, but too small - I would prefer a bigger letter size

Thanks !


#12

Hi,

Please try this Custom CSS and let me know how it works:

.roll-icon-box .content h3, .roll-icon-box .content h3 a {
    font-weight: bold !important;
    font-size: 20px !important;
}

Best Regards,
Csaba


#13

Great Csaba, this works perfectly.

Many thanks !


#14

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba