For all of the pages on a wordpress site I need the .wrap {max-width: 100%;} but for some reason this affects the archive search page differently and makes the results span the whole page. In short if I know where to add the jQuery, I can code it myself but I am having difficulty finding where exactly to put this code.
By archive results page I mean, when on a wordpress blog and the default archive widget with the dropdown menu is clicked, you choose a month and are forwarded onto a page for that month. This page displays the results, and on this page I need to bring the wrap max-width in.
I know it's probably more efficient to do with PHP but I am not comfortable with PHP yet so would prefer to just put a simple jQuery .CSS function in there.
You can do this without JQuery. Add this in your header.php file before wp_head() function.
<?php if(is_archive()){ ?>
<style type="text/css">
.wrap {
max-width: 70% !important; //Change this to whatever you want.
}
</style>
<?php } ?>
Related
I have added styling to my anchor tag and have made the text-decoration to none to the entire website. But I want the blog section of my website to underline the links.
I'm using the code snippet plugin in wordpress as I don't have direct access to the files.
And this is the code that I'm using.
add_action( 'wp_head', function () { ?>
<style>
a:link {
text-decoration: underline;
}
</style>
<?php } );
The problem is that this PHP code gets applied to my entire website which is not what I want. I only want this to be applied to the body section of the blog content.
I would love to have someone assist me with this problem.
Thank you.
This is a job for CSS (inside a <style> tag) with specific selectors. Your CSS selector, a:link is very non-specific. That is, the browser uses it whenever it sees an anchor <a> tag.
You need the browser to use it only on some anchor tags. So, you use a more specific selector.
Try using this CSS to style the links within articles in your posts and pages.
div.site-content main article a:link {
text-decoration: underline;
}
It affects anchor tags only in html nested inside a hierarchy of HTML elements. Most themes use these elements.
If you want to style just posts (not pages), put article.post in the selector instead.
div.site-content main article.post a:link {
text-decoration: underline;
}
You can add CSS to your site without the Code Snippets plugin, and without php code. Go to Appearance -> Customize. At the bottom of the left column choose Additional CSS. Then put in the CSS you need.
If you want to be able to figure this out for yourself, right-click in the browser element you want to style and choose Inspect. You'll see the HTML for that element along with the elements it's nested inside.
Additional CSS is a good setup because it survives plugin updates, and because you don't neet to hack any php to get it to work.
On my website on all pages except the home page, here's an example: http://www.pantsdownrecords.com/discography/, the issue I have been having is with the custom header. In the customer header div element where it says: “div class=”custom-header” and right after this is a style tag adding a margin-bottom of 82px. I have looked in all of the template pages and even the few plugins I am running right now, and cannot find where this style tag is being added. And since it is a style tag I can’t override it with CSS since style tags take precedence. Since this margin bottom is there, on some pages I can’t even see the footer because the page can’t scroll to the bottom.
Could somebody help point me in the right direction of where this issue is coming from?
All help would be greatly appreciated,
Thanks
It's in this file - http://www.pantsdownrecords.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0
Under the adjustScrollClass() function. And you can overwrite an inline style with !important in your CSS. You should use that feature sparingly, but it works if you need to overwrite an inline style.
You could open more files in notepad++ and use search with Find in all open documents if you want to find a specific string.
You could change this with CSS by using !important for the specific element or check with javascript or jQuery for pages where you have the problem and set the specific styles.
CSS:
.custom-header { margin-bottom: 0px !important")
JavaScript:
var winURL = window.location.href;
if(winURL == "http://www.pantsdownrecords.com/artists/") {
document.getElemetsByClassName("custom-header")[0].style.margin = "0px 0px 0px 0px";
}
jQuery:
var winURL = window.location.href;
if(winURL.indexOf("artist")) {
$(".custom-header").css("margin","0px");
}
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I have recently set up my wordpress site, but the comments section below each post spans the full width of the screen, rather than following the margins used in the rest of the page. How do I set the margins to be the same as the rest of the page for this section?
Either your footer elements need to be within the container ID div tag. Or they must be wrapped in their own div with an ID or class given the style
#footerWrapper {
width: 768px;
margin: 0 auto;
}
This will center and align them to the main container div. It's most likely the wordpress functions were moved around in the template files.
The footer on your home page you'll see is wrapped in
<div id="footer" class="full left"></div>
So someone messed up your single.php template file. That's it because your index, pages, archives are all ok so whatever template most likely single.php needs to be edited.
How to make an external PHP widget page have its own CSS.
The catch is - when the external page is included it's been affected by the stylesheet of the host page.
The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.
The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.
Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.
How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?
You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.
You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.
You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.
Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.
For example, in both of the below samples, the second rule will overwrite the first one:
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
or
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:
<div id="widget">
<!--your code here-->
</div>
Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/
Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.
Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.
ex.
<div id="widget"><p class="nav">hello</p></div>
instead of,
.nav{
// styles
}
do
#widget.nav{
// styles
}
CSS Styles prioritize like this:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.
If I understood correctly, your included page has some CSS rules such as:
div {/*rules*/};
p {/*rules*/};
and so on.
You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.
For example, say your included page is wrapped in a div, the PHP code would be:
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
Then, all your rules for the page should refer only to the children of the element with the id my_page:
Instead of
div {/*rules*/};
you'll have
#my_page div {/*rules*/};