In my blog, the text that says "Older posts" is written in gray, and very invisible. I would like to change its style.
I can do that through the php files, but then, every time I update the theme, I'll have to redo that. So I need a way to do it in a way that makes it independent of updates.
Thank you for any efforts.
You can install the plugin http://wordpress.org/plugins/my-custom-css/
And Add the CSS code for the pagination.
If you have google chrome just right click over the Older Posts Inspect Element
See the CSS class used by it and add the CSS code for that class in the Plugin after installation.
You should be able to style the link with CSS but it is difficult to show you without any code segments provided in your question.
If you use chrome developer tools, simply click on the element, find its class name and reference it in your style sheet.
I've provided an example below which is taken from another wordpress theme, but I cant guarantee it will be the same as your own:
<div class="post-more">
<span class="read-more"><a title="Read more" href="http://www.website.com">Read more</a></span>
</div>
The CSS:
.post-more a {
color: #000000; /*New Colour*/
}
Related
I need to remove vertical scrollbars from a specific webpage only in my site
http://historyofliverpool.com/test-2/
The page is made up from many php and css files, to I do not know where to begin editing, and do not want to alter the rest of the site.
Would a custom field on this page only solve my problem?
Any help much appreciated.
I can't find any overflow: hidden in your stylesheet.
Please try this:
.fullscreen {
overflow: hidden;
}
Removing the scroll bar is easy; you would simply need to apply overflow:hidden to the body selector.
The real challenge is removing the scroll bar on the correct page. There are quick and dirty ways of doing this, but lets take our time and look at this sensibly:
Child Themes
It looks like you're using the Anglepane theme. As this is a commercial theme I'd recommend you first create a child theme before making any changes. This way when the Anglepane theme is updated it doesn't remove your edits.
Identifying the page - body_class()
The next step is identifying and selecting the page you want your changes to apply to. WordPress has the convenient body_class() function that adds CSS classes to the body element, allowing you to easily add styles on a page by page basis. Now it looks like your theme isn't using this function; so you should add this function by:
Copy the header.php file from the parent theme folder to your child theme folder so you can edit it
Find the body tag and alter it like so:
<body <?php body_class( $class ); ?>>
Identifying the page - ID vs template
Once you've added the body_class() function you should find that your body element will have a bunch of classes that you can use; one of these will be the page ID, prefixed with .page-id-. You can now use that class name for your CSS. For example, if your target page had an ID of 3 you could use:
.page-id-3 {
overflow:hidden;
}
While this works, I personally like to use page templates instead for targeting page-specific styles. One of the benefits to this is that it avoids mismatched page IDs between different environments. For example, I might want to change the background colour of my about page, which has an id of 4:
.page-id-4 {
background:red; // Works as long as the page ID is definitely 4
}
That works great on my local copy of the site, but on the live site my about page has an id of 24. I avoid this by creating a page template specifically for my about page. This way I can use the page-template selector instead, which is consistent across both environments:
.page-template-about {
background:red; // Now I work everywhere
}
Hopefully that convers everything in sufficiently detail for you.
I am looking to edit the css styles from inside the Dashboard inside of wordpress and NOT have to edit the php files if possible.
I know it is possible to edit at least some of the properties so my hope is I can edit all of them right within the dashboard.
MORE SPECIFICALLY
How can I change the css states of links and submenus of a custom class? For example the a:active, a:hover, a:link etc... and ALL OF THE SUB-MENUS to custom css as well?
I have included these pictures to show you what I am trying to do and the present results.
MY CUSTOM MENU INSIDE OF WORDPRESS
CUSTOM CSS INSIDE OF WORDPRESS
THE RESULTS
I am taking the time to give a little more details in gratitude for all the help I got on stackoverflow over the years, also giving a little more info for the newbies out there. We are all learning.
Here is what worked in pictures
I used Firefox and used "INSPECT ELEMENT". While on the page I did a LEFT CLICK and from drop down I chose INSPECT ELEMENT.
Then I clicked on the PICK AN ELEMENT icon, as seen in the picture and then I hovered over the element I wanted to edit, in this case a button in the menu. This gave me the class I needed to edit.
I went into my DASHBOARD in WordPress and made this change to the code. Finally I got the results I was looking for, which I also included in the same picture as well.
Although I have not figured out how to edit the sub-menus yet I believe I am on the right track and will figure it out.
HOPE THIS HELPS SOMEONE. :)
I am using a newsletter plugin in http://coconutwaterblog.com. But i want to style that single widget with heading background as yellow.
Can anyone suggest me how to do this.
Thanks
Depending on how the widget is developed, it could be pushing the styles inline and not via CSS.
Use Developer Tools (such as Firebug) to determine where the current styles are coming from to determine where they need to be altered to achieve the desired result.
If able, you could then alter the theme style sheet to include what you wanted to do to the specified element.
After viewing your site, I had problems determing which widget you were attempting to alter. If ti's the "FROM THE BLOG" widget, the CSS would appear as such:
#omc-sidebar.omc-right ul.xoxo li#pages-2.omc-widget h3.widgettitle {background:yellow;}
And, after looking at the markup on the page, it appears those attributes come in to play on line 80 of the document itself, which means you're not going to be able to over-ride them with a style sheet. You will have to alter the code either in the plugin of the theme itself.
I needed few simple changes to the style sheet files and I successfully managed to make these changes offline through Google Chrome Inspector but when I tried every time to implement these changes on the Tumblr theme, the blog breaks down and becomes a big mess.
Can you guys tell me please how to tackle this issue? What's the right approach or the appropriate workflow to introduce such changes of this nature without disrupting the theme?
Thanks in advance for your time and cooperation.
Tumblr themes should have the ability to insert Custom CSS.
When inside your 'Customize Theme' panel, open the 'Advanced' tab (at the bottom), there will be a box that will allow you to add Custom CSS. Add the changes you'd like to make there.
If you don't see the changes, your theme might not be optimized to accept the custom CSS that you've entered.
Click on the 'Edit HTML' button and search for {CustomCSS}. If you can't find it, then you'll need to add the following code before the </head> tag.
<style type="text/css">
{CustomCSS}
</style>
That should do it!
I'm customizing the Wordpress Admin site to suite my needs and there are several things I want to remove and customize (menus, etc...).
I noticed on the DashBoard section called 'Right Now' there are several things I don't need there. For instance the CHANGE THEME button and the wordpress version and theme. I found in the source dashboard.php where these are rendered, but rather than edit the source, can I just make a function that intercepts and changes this so it doesn't render them?
I also want to remove the DISCUSSION section and some of the counts for CATEGORIES, TAGS, and PAGES.
Is there a way to go about this? Thank you!
Hmm I think I solved this myself, although I'm not sure correctly. Using firebug I was able to find the class names and element ID's of the version and CHANGE THEME button and the version and theme
I added this code in my functions.php:
function wpc_remove_admin_elements() {
echo '<style type="text/css">
.versions p {display:none !important;}
.versions #wp-version-message {display:none !important;}
</style>';
}
add_action('admin_head', 'wpc_remove_admin_elements');
This added some styling in my header to hide these elements.
Is there a more efficient way to do this or am I going to be ok? I still don't know how to hide some of the Content and Discussion counts in the RightNow dash.