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.
Related
I'm making a custom dashboard for WC and need to add content just between the nav and ul elements in WooCommerce's menu in dashboard in the easiest way.
I've seen there's a hook called woocommerce_before_account_navigation and woocommerce_after_account_navigation but those hooks add content after or before the entire nav element.
Here is a picture of what I'm trying to do.
Someone got a solution?
Since WooCommerce doesn't provide hooks to inject code exactly where you need it:
#1 Customize the navigation section from your theme
Since WooCommerce allows you to override most of its template files, you could:
Copy the navigation.php file located at /wp-content/plugins/woocommerce/templates/myaccount/.
Paste this file into /wp-content/themes/your-theme/woocommerce/myaccount/.
Make your desired changes.
Profit!
Keep in mind that you'll want to keep an eye on WC's updates from time to time because there might be changes in the files you're overriding that you might want/need to port over.
Or...
#2 Inject your custom code right where you want it using AJAX & JS
Use WordPress' AJAX API to generate the HTML output you need and inject it right between the nav and the ul tags using jQuery/vanilla JavaScript.
This way you avoid having to override WC's templates. Keep in mind though that if you do this while using a caching plugin on your site you'll need to configure it so it rebuilds its cache every ~24 hours or less or else things might break for some users (example).
Well....the easiest but not the best way is to:
Manually put a an empty div tag so that your code becomes something like:
<nav class= 'woocommerce-MyAccount-navigation'>
<div style ='blah-blah'>//that div after the nav bar ;TLDR
<div id='newDiv></div>
<ul>//etc
Wrap up the code to display user infos, avatar and name in a php function (I named mine
getUsernameAndStuff()) letting id be the id of the user.
Like :
<?php
function getUsernameAndStuff(id){
//put the code here..
}
?>
Then using js:
<script>document.getElementById().innerHTML=<?php getUsernameAndStuff(id)?></script>
So I know this is a bit out of ordinary for me to ask a question like this, but for some reason I am just really having an issue grasping this.
My Problem:
I have a responsive layout theme for word press, its clean its pretty. When implementing Google ad-sense into a text/html widget on the right bar it over runs the widget size and over hangs on the right hand side.
My Question:
What will be the best method for getting my ad to look more uniform. Is there a way to select a single widget css? Is there a way to put a div inside that widget and select the parent css from that div? Should I go in and hard code it into the theme?
Additional:
The theme I am using has a built in child theme option which I have chosen to use. When I place the code into the child themes function.php it breaks the theme and displays what I enter as plain text to the screen. Adding opening and close php tags did not seem to fix this issue.
Well it appears once again I asked a question before fully digging my brain into this. Hopefully this will become something useful for someone else.
FIX:
It appears that wordpress assigns a unique ID to every widget that is created.
Created New Text Widget
Wordpress Assigns: text-1
I can now go into css and manipulate this widget directly.
#text-1 {
//do somthing
}
It's always best to avoid hardcoding WP themes as when they get updated your modifications might vanish.
Glad to see you figured it out, I was going to say that you CAN add a div inside a widget and give it a name, which might still be be better than use the WP assigned layer name, as that might change if you were to delete or re-add the widget.
I want to add two pictures, both floated in opposing directions above the content of my word press theme,
I am going for this: old link
Here is a link to the site I am working on: test link
How could I create a wrap above the content, but below the header, and to take up 100% of the container?
I have tried creating a new wrap in the structure, but that does not work, it creates a container within site-inner. I've tried putting a text widget in the header area, but when I add a margin-top to it, the logo moves with it.
Edit:
I have since found out what I was doing wrong. I am using a genesis theme, and looked up the proper hooks. Ultimately I ended with this code,
add_action('genesis_after_header', 'add_featured_image');
function add_featured_image(){
echo get_the_post_thumbnail( );
}
I used this as a visual reference, genesis_after_header is the location,right after the header in the layout. The code I referenced to earlier allows the user to set a featured image on the page or post panel, and it'll be displayed. If you want to fit it within a column, you will want to add it before content entry.
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'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.