I am using a very simple free Wordpress theme that I am really happy with but I cannot figure out how to move the names of the budgies along to the right:
http://swearingbudgies.co.uk/
I have tried Firebug to find out how to do this but the only tag I can see is a: - problem is when I apply padding-left to a: it also shunts the images along. Will this require changes to the html/php as well as the CSS to fix?
Add the following class in your CSS. Next time onwards don't come up with site url. Add your problem in fiddle/codepen or something like that and post here your code. Otherwise people will give downvote and close your question including me.
a.image_link + div
{
text-align:right;
}
try
#main-content div.post div{
text-align:right;
}
Related
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");
}
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
So my problem is awkward, I have a Wordpress website on which I can't overwrite CSS. On which I've added a google font.
The problem is that sometimes when I want to overwrite a CSS using either a id and class selector, or embeding style into html, the font get's always overwritten.
How to overwrite css (font-face) which is coded in css in style_options.php which generates options.css.
Did anybody solve this problem already?
Thank you for answers!
Strictly speaking, if you want your attribute not to get overwritten, you need to use !important like so:
p {
color: blue!important;
}
#myid {
color: red;
}
<p id="myid">This text is blue.</p>
But i think you should check in your theme's option, there's gotta be some way to edit within wordpress such things as the font. (thanks Vineet Kaushik for pointing that out)
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 know a fair bit about HTML, CSS, jQuery but I haven't dabbled with PHP yet. I was given a code to help me apply a style to the webpage, only if it was a blog page:
<?php if(is_archive()){ ?>
<style type="text/css">
.wrap {
max-width: 1200px !important;
}
</style>
<?php } ?>
This, inserted into the header file, has worked perfectly since. On my return to work after a short absence I find that this code is still in the same place it has always been but is no longer effective? As the code gives the archive pages a max-width, these now look dreadful without it because the margin: 0 auto doesn't work either.
Take a look for yourself here. I'm not sure if this code is written correctly because I recently found that hostgator's file browser editor had added code to files I'd edited when I was out of office. Any help is appreciated but please bear in mind that I know nothing about PHP, other than where to copy and paste it.
You can try replacing your normal wrap class with this:
<div class="wrap<?php echo (is_archive()) ? ' full-width' : ''; ?>">
Then you can access this via #container .wrap.full-width {width: 1200px!important;}