Docs

[Jeypolitan]

Hi there! 🙂

I would like to change the color of my “next page” buttons at the bottom of my page.
They are currently “quite hard” to see, as they blend in with the background (only grey shadow).

I would like to have a more similar style to the screenshot attached.
When hovering the buttons, nothing changes. I would like for the button to turn black + the text to turn white when hovering.

Please advise.

Best,
J

[Jeypolitan]

This reply has been marked as private.

[Jeypolitan]

Another thing that I would like to change, is the “share this post” social media buttons beneath each post.

As you can see in the attached screenshot, the buttons are not located centralised right under the “share now” text.
Please see attached screenshot of the current position. I would like them to be in the center so it looks more professional.

Please advise. 🙂

Best,
J

[Friech]

Hi J,

For the pagination button, add this on your custom CSS on Customizer

body .x-pagination a {
	border: 1px solid #333;
	border-radius: 0;
	box-shadow: none;
}
body .x-pagination a:hover {
	color: #fff;
	background-color: #757575;
}

Regarding the share icon, that seems to be a 3rd party plugin. Try adding this on your custom CSS

.tg-jeypolitan-main-page .tg-element-16 {
	margin-left: 5% !important;
}

Hope it helps, Cheers!

[Friech]

Hi J,

For the pagination button, add this on your custom CSS on Customizer

body .x-pagination a {
	border: 1px solid #333;
	border-radius: 0;
	box-shadow: none;
}
body .x-pagination a:hover {
	color: #fff;
	background-color: #757575;
}

Regarding the share icon, that seems to be a 3rd party plugin. Try adding this on your custom CSS

.tg-jeypolitan-main-page .tg-element-16 {
	margin-left: 5% !important;
}

Hope it helps, Cheers!

[Jeypolitan]

Hi Friech,

Thanks – that worked perfectly! 🙂

In terms of the pagination buttons, I would like the numbers/font to be black, and when hovering, they remain white.
Currently they are light grey, and when hovering they become white.

Please advise. 🙂

Best,
J

[Christopher]

Hi there,

Please find this code :

body .x-pagination a {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
}

And update it to :

body .x-pagination a {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    color: #000;
}

Hope it helps.

[Jeypolitan]

Hi Christopher,

That worked fantastic – thank you so much! 🙂

[Jeypolitan]

Hi again,

In my footer, I have an Instagram widget. As you can see, the background of the footer-widget-area is white.
How can I change this footer colour? I would like to have it #2e2d2d.

Many thanks! 🙂

Best,
J

[Thai]

Hi There,

Please add the following CSS:

footer.x-colophon.top {
    background: #2e2d2d;
}

Hope it helps 🙂

[Jeypolitan]

Hi Thai,

That worked fantastic – thank you! 🙂

Now the final change to my footer. I would love to have this line-breaker between my text (Instagram) in my footer.
Please see attached screenshot for example.

How can I achieve this?
Please advise 🙂

Best,
J

[Lely]

Hi J,

Please use the following CSS:

div#text-16>div>span {
    overflow: hidden;
    display: block;
}
div#text-16>div>span>a {
    display: inline-block;
    position: relative;
    padding: 5px 20px;
}
div#text-16>div>span>a:before {
    right: 100%;
    margin-right: 0.5em;
}
div#text-16>div>span>a:after {
    left: 100%;
    margin-right: 0.5em;
}
div#text-16>div>span>a:before, div#text-16>div>span>a:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 3px;
    width: 9999px;
    display: block;
    margin-top: -2px;
    border-top: 2px solid #272727;
}

See attached screenshot.

[Author]

Posts