CSS Code Change for Sydney Services Types A & B

Hi all, I’m a newbie

I’ve searched for almost 2 hours for CSS code to change the sites of the services displaying on the widget. I want to change the grey to a white and increase font size. URL: http://hausofmixology.nz/what-we-offer/
The title is smaller than the body. 4 x Packages CSS code and “What We Offer” CSS code

Would be saving my butt. Can someone help me out?

Thanks!

Hi,

Please try the css code below:

  • Change the color and font size of widget title:
#pgc-21-0-0 .widget-title {
    color: #FFF;
    font-size: 40px;
}
  • Change the color and font size of the subtitle:
#pgc-21-0-0 .content h3 {
    color: #fff;
    font-size: 22px;
}

Hi Awan

Perfect. First code segment worked perfectly check the link - http://hausofmixology.nz/what-we-offer/

However the h3 didn’t work. I couldn’t work it out. I’ve tried all the different h3 tags to change colour (for starters without changing front size) but still nothing.

Thanks n advance,
C

Hi,

Great! its working :slight_smile:
And I noticed that the h3 is working also, previously the h3 has a grey color and the font size is small.

Hi I am using Sydney FP: Services type B widget on this page: http://www.smarthomebuyer.co.nz/building-inspectors/.

The gap between the items is large. Can I reduce the margin/gap/white space?
i.e. the gap between the items:
"
Property Lawyer

Mortgage Broker

Property Valuer

Building Inspection
"

Thanks very much

Hi @manojpatel77

You can use this CSS code to reduce the gap:

.widget_sydney_services_type_b .service, .roll-icon-list .list-item {
    margin-bottom: 0;
}

you can put the code to: customize > additional css.

Regards,
Awan

Thanks that worked perfectly. Thanks.

Is there also a way to reduce the gap between the above header (Text widget) and the ‘Sydney FP: Services type B’ widget?

e.g.
-> on this page:
the gap between: “AUCKLAND” and “Property Lawyer”?

I only want to reduce this gap. I don’t want to reduce the gap on top of the text widget.

Thanks, Manoj

Opps I forgot the link in the previous message. It should read…

Thanks that worked perfectly. Thanks.

Is there also a way to reduce the gap between the above header (Text widget) and the ‘Sydney FP: Services type B’ widget?

e.g.
-> on this page: http://www.smarthomebuyer.co.nz/building-inspectors/
the gap between: “AUCKLAND” and “Property Lawyer”?

I only want to reduce this gap. I don’t want to reduce the gap on top of the text widget.

Thanks, Manoj

Hi Manoj,

I can’t access your page (http://www.smarthomebuyer.co.nz/building-inspectors/), do you remove it?

Regards,
Awan

Hi Awan,
Yes I changed the site sorry.
The problem can be found in this page : http://www.smarthomebuyer.co.nz/building-inspection/

Refer to the Gap between ‘Auckland’ and ‘check first house’. Can this gap be reduced?

Thanks Manoj

Oh I see… you can use this CSS code then:

.panel-grid-cell .widget-title {
    margin-bottom: 5px;
}

Hello,

I am also a newbie. I am trying to change the font color for the Services text on the Sydney theme. Any help would be greatly appreciated!

Thank you,
James

Hi @jchristoforo,

Please create new post in Sydney Forum instead.

Regards,
Awan

I would like to Change the Title and Body text size (not the widget Title) for Services B - I have tried using a variation on the CSS for increasing the size of the Title in Services A with no luck. And in regards to Service B, I have kept your demo content and I am using the Origin Image to the Right of the Services B section. Is there any way to center the image upon the height of the Services B section to its left?

Hi @kbrickster,

Please try these CSS code instead:

.widget_sydney_services_type_b .widget-title {
    font-size: 28px;
}
.widget_sydney_services_type_b .content h3 {
    font-size: 16px;
}
.widget_sydney_services_type_b .content p{
    font-size: 14px;
}

Feel free to adjust the value of the font-size on code in above.

Regards,
Awan

Could you tell me how to change the Icon color which display in the Services A and B section so each sections icons can have their own color?

Services A while be Orange (Where to Use Custom Comic Books)
Services B will be White (Why Use Custom Comic Books)

I also noticed that when I use a Background Image for the Services B Row the system automatically added a dark filter. Can this be removed to display the image as uploaded?

You can see my website at www.bricklinvehicles.com

Thanks!

Hi,

Please try the CSS code below:

  • service type A:
.widget_sydney_services_type_a .roll-icon-box .icon i {
    color: #ff3e1b;
}
.widget_sydney_services_type_a .roll-icon-box .icon {
    border-color: #ff3e1b;
}
  • Service type B
.widget_sydney_services_type_b .roll-icon-box .icon i {
    color: #fff;
}
.widget_sydney_services_type_b .roll-icon-box .icon {
    border-color: #fff;
}

"I also noticed that when I use a Background Image for the Services B Row the system automatically added a dark filter. Can this be removed to display the image as uploaded?"
I didn’t see these issue on your site.

Regards,
Awan