How to change default color of page 1?

How to change default color of page 1 button

Also tell me codes for hover and background grey color.

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

body .x-pagination ul {
    background-color: #f00f00;
}
body .x-pagination span.current {
    background-color: #f0f0f0;
    color: #f00f00;
}

body .x-pagination a:hover {
    color: #000000;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

@thai Hey thank you, I will try your code today and I am sure it will work. Can you please tell me one more thing. I know I should ask this from a developer and it is not a theme related question. Still I seek your help in this regard.

I am using renew theme and by default navbar color also changes the dropdown color in same way. Is there any way so i can change the drop down color in this way >>>

Also tell me how to get shadow like this image? Hope you will help me in this regard.

Hello Sansar,

To achieve what you want, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.site .masthead-stacked .x-navbar .desktop .sub-menu {
    background-color: white !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.85);
}

Just replace the rgba() value with the rgba of the orange color that you want.

Hope this helps.

Hi @RueNel

Thank you. I inserted code in global CSS. I then cleared cache of browser. But nothing changed. :frowning:

Hey Sansar,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

@RueNel

yAH Sure

Hello Sansar,

Please have the code updated and use this instead:

.site .masthead .x-navbar .desktop .sub-menu {
    background-color: white !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.85);
}

Please let us know if this works out for you.

Hi this is working ; but how can I change dropdown font color. Actually it was white so it is mixed with white dropdown background and disappeared.

If I change it from Header setting then navbar links and dropdown links both will be changed and it will look ugly. I want navbar links white and navbar dropdown link black.

Hello Sansar,

Please update the css code again and use this:

.site .masthead .x-navbar .desktop .sub-menu {
    background-color: white !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.85);
}

.site .x-navbar .desktop .sub-menu li > a {
    color: rgb(241,99,52);
}

.x-navbar .desktop .sub-menu li:before, 
.x-navbar .desktop .sub-menu li:after {
    background-color: rgb(241,99,52);
}

Hope this helps. Please let us know how it goes.

Hey thank you for your tremendous support. One last help I need from you.

@thai gave me following code to change color of pagination

body .x-pagination ul {
background-color: #f00f00;
}
body .x-pagination span.current {
background-color: #f0f0f0;
color: #f00f00;
}

body .x-pagination a:hover {
color: #000000;
}

It worked like charm.

But can you tell me how can I make page numbers darker? It is grey right now and almost invisible.

and if possible also give me code for that white circle color…so later if necessary, I can change that white circles colors like first page (1).

Hi again,

You can make use of the following code:

body .x-pagination a {
    color: #000;
    background-color: #cefaff; /* background color of the circle */
}

/* For hover color and hover background color */
body .x-pagination a:hover {
	color: #000;
    background-color: #7eccc9;
}

Hope this helps!

Thank you so much. These days I am facing

504 Gateway Time-out
nginx/1.15.7 error whenever I am trying to visit X>Theme Options

On the other hand, same command is working very well in other websites in same server and same theme.

Can you please explain this?

Hello Sansar,

Thanks for updating the thread. :slight_smile:

Please take a look at solution mentioned in following thread.

Thanks.

@Prasant

Hi, Thank you for suggesting thread. Well, I know what is 504 gateway time-out error is. But amazingly this page is only appearing when I am trying to reach x>theme options

Otherwise all things are alright.

Hi Sansar,

Please do the following:

  • Clear all the site caches (plugin, server-side, CDN, and browser’s cache) so that the code from the latest release is always in use. This will help you to avoid any potential errors. Please deactivate this caching features while we tackle this issue.
  • Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  • Contact your hosting provider to increase your allocated memory limit or do it yourself by adding this code in your wp-config.php file.
define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

You can add it before the line:

/* That’s all, stop editing! Happy blogging. */

Increasing PHP Memory Limit

Let us know how it goes,
Cheers!

Thank you for all your support.

It was a plugin conflict so 504 page was coming.

One more problem I am facing now. I updated latest version of Wordpress and now some icons like tags, search icon, social icons etc. are not appearing in a proper way in all browsers (chrome, firefox etc)

My site url > https://www.sansarlochan.in/

I am attaching a screenshot

Can you tell me how to fix it

Hi There,

Upon checking your website, I could see this error message in the console log:

Access to font at 'https://p6k3i7q3.stackpathcdn.com/wp-content/themes/x/framework/fonts/font_awesome/fa-brands-400.woff' from origin 'https://www.sansarlochan.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To fix this issue, please add the following code under .htaccess file locates in the root directory of your FTP account:

Header set Access-Control-Allow-Origin "*"

Hope it helps :slight_smile:

Hi ended Header set Access-Control-Allow-Origin "*"

in last line of htaccess but nothing worked

Hello Sansar,

Access to font at 'https://p6k3i7q3.stackpathcdn.com/wp-content/themes/x/framework/fonts/font_awesome/fa-brands-400.ttf' from origin 'https://www.sansarlochan.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please check out this article for more information about this issue and how to resolve it.

Hope this helps. Please let us know how it goes.