Change title/text css for instagram widget - Support | Kriesi.at

Tagged: widgettitle

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
June 27, 2018 at 2:26 pm #978430

getfred
Participant

How do I change title-text css for instagram widget. Tried calling both .widgettitle and h3 with no luck. Can you help with custom code?

Thanks in advance,
Frederik

June 28, 2018 at 5:21 am #978729

Rikard
Keymaster

Hey Frederik,

Could you post a link to where we can see the element in question please? Also, what exactly are you looking to alter?

Best regards,
Rikard

June 28, 2018 at 11:40 am #978840

getfred
Participant

Hi Rikard,

I’m specificly looking to alter the header text for the instagram widget “… out and about”. I also would like to change the button “follow me” and maybe put in some additional text above or below.

See at bottom: http://gastroagency.dk/Wordpress/

/Frederik

June 30, 2018 at 7:39 pm #979620
Mike
Moderator
Hi,
To adjust the “… out and about” for the instagram widget, Try this code in the General Styling > Quick CSS field:
```
.avia-instagram-feed h3.widgettitle {
font-size: 70% !important;
color: red !important;
}
```
adjust to suit.
To change the button font color, try this css:
```
a.av-instagram-follow.avia-button {
color: red !important;
}
```
To add text before (above) & after (below), try this css:
```
a.av-instagram-follow.avia-button:before {
content: " Before \A";
 white-space: pre;
}
a.av-instagram-follow.avia-button:after {
content: "\A After";
 white-space: pre;
}
```
To have the text before & after inline with the button text, please remove the “\A” from the code.

Best regards,
Mike
July 1, 2018 at 10:10 am #979772
getfred
Participant
Hi Mike,

Thankyou for your reply. I’m sorry to say I can’t get the code to work. I has no effect on the visual, even with the “!important” add. Maybe some of my other code messes it up? Just copied your code below all mine in quick css. Like following:
```
.av-main-nav > li > a {
  font-family: "essonnes-display",serif;
  font-style: italic;
  text-transform: none;
  line-height: 1 !important;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0px;
  color: #030405 !important;
  text-decoration: none !important;
}

#avia-menu li:hover a {
  color: #e94d26 !important;
  text-decoration: underline !important;
}

.main_color {
  border-color: #ffffff !important;
}

h1 {
  font-family: "essonnes-display",serif !important;
  font-style: normal;
  text-transform: none !important;
  padding-top: 10px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  font-size: 40px;
  letter-spacing: 0px !important;
  color: #030405;
  text-decoration: none !important;
}

h2 {
  margin-top: 0px !important;
  font-family: "essonnes-display",serif !important;
  font-style: normal;
  text-transform: none !important;
  padding-top: 10px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  font-size: 26px;
  letter-spacing: 0px !important;
  color: #030405 !important;
  text-decoration: none !important;

  }

.avia_textblock {
  font-family: "essonnes-display",serif !important;
  font-style: normal; !important;
  font-style: normal;
  text-transform: none !important;
  padding-top: 10px !important;
  line-height: 1.4 !important;
  font-weight: 300 !important;
  font-size: 18px;
  letter-spacing: 0px !important;
  color: #030405;
  text-decoration: none !important;

  }

@media only screen and (max-width: 767px) {
.logo img { opacity: 0; }
.logo a { background-image: url(https://gastroagency.dk/Wordpress/wp-content/uploads/2018/06/gastro_agency_logo_mobile3.gif); background-repeat: no-repeat; background-size: contain; }}

.avia-instagram-feed h3.widgettitle {
font-size: 70% !important;
color: red !important;
}

a.av-instagram-follow.avia-button {
color: red !important;
}

a.av-instagram-follow.avia-button:before {
content: " Before \A";
 white-space: pre;
}
a.av-instagram-follow.avia-button:after {
content: "\A After";
 white-space: pre;
}
```
Btw: I’m using the typekit for wordpress plugin…
- This reply was modified 6 years, 5 months ago by getfred.
July 1, 2018 at 11:55 am #979795

Mike
Moderator

Hi,
Please add the css to WordPress > Customize > Additional CSS
Then clear your browser cache.
If this still doesn’t work, then please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

July 1, 2018 at 5:13 pm #979861

getfred
Participant

Hi Mike,

Thankyou, that worked! Moving the css to additional css! Case solved :)
Now my only issue is the grey line above the instagram feed. But i’m gonna try and solve it myself.

BR
/Frederik

July 1, 2018 at 6:55 pm #979880
Mike
Moderator
Hi,
Please try adding this css to WordPress > Customize > Additional CSS:
```
.container_wrap.footer_color {
    border-color: transparent !important; 
}
```
Best regards,
Mike
July 2, 2018 at 9:23 am #980018

getfred
Participant

Thankyou again Mike! Now I can css both in additional & quick css areas :)
(And if it does’nt in one of them, it might work in the other?)

Best Frederik

July 2, 2018 at 1:11 pm #980077

Mike
Moderator

Hi,
Yes, typically the WordPress one loads last, so your css changes will always work there, plus it has a good error checker to point out any issues in the code.

Best regards,
Mike
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.