I am using the Redux theme and I added this:
If this “img” entry already exists, we’re going to add one simple
piece of code to it. Within the { } brackets following “img”, add this
code (in bold) just before the closing } bracket: height:auto;
in the style type="text/css" part of the code.
Since then, the photosets on the "Edit Theme" page show Tumblr error messages. This doesn't happen on single image posts.
I've installed new themes, reinstalled Redux but it stays the same. Here is what is on the inspect bit when I right click on the error on my photoset:
<p class="error-message-text" data-localization="message">
Whatever you were looking for doesn't currently exist at this address.
Unless you were looking for this error page, in
which case: Congrats! You totally found it.
</p>
How do I fix this?
We need to see the code blocks for your tumblr template. And also a link to the live tumblr would be helpful. Are there errors being thrown in the console?
Please find at requested.
</style>
<!--[if lt IE 7.]>
<style type="text/css">
#wrapper #sidebar #bottom {
background: transparent;
}
#wrapper #sidebar #top #avatar {
background: none;
}
#wrapper #sidebar #top #avatar img {
border: 5px solid #f1f1f1;
http://biscuitsarenice.tumblr.com/
Related
i have the following website
http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/
and I'm trying to change the header menu color. I have previously changed the colour for the menu items themselves from code that someone provided here and it was very helpful however no matter what I do I can't change that dirty blue color to something nicer.
I have tried various types of code:
top-header {
background-color: white;
}
header {
background-color: white;
}
.sf-menu {
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #ffffff !important;
}
It you visit the actual stylesheet that's doing the overriding, you'll see that it's a custom stylesheet that's being generated by theme options. It doesn't even exist on the server as an actual .css file. It's also the last styles being called on the page.
Rather than editing a different CSS stylesheet and using !important to override this, you're better off updating it (or even removing this, if possible) from the WP Admin theme options.
Also, as mentioned by the (now deleted?) other answer, you need to make sure you're prefixing the .top-header class with a .. Your question doesn't currently show this.
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
Using Firebug, I finally (this has been an ongoing struggle) found the CSS that I need to edit to fix my sidebar spacing program. It's below:
#sidebar .widget {
margin-bottom: 45px;
position: relative;
}
What I want to do is edit the margin-bottom to be 5px instead of 45. However, I cannot seem to find this specific CSS anywhere. When I find it through Firebug, it's in a file called all.css, but I can only edit the style.css file through Wordpress.
I've tried changing it in the custom CSS, but that doesn't fix anything. Can someone please help me? I know nothing about CSS, and I was so excited to finally figure out what I need to change, and now I can't change it!
Check in the <head> section, if the style.css is loaded after the all.css. If not, you must provide a CSS rule that will be more precise than the one from all.css, e.g.
#sidebar div.widget {
margin-bottom: 5px;
position: relative;
}
(if the .widget is a div, of course)
I wanna change my CSS for a specific page, and I can not get the ID of that page.
I wonder how I can change my CSS for a specific page when I don't have a ID of that page?
This is the ID of my page: forum=forum-framtidsjouren
If I change the code below I'm changing other pages too...
.home #content, .single #content, .page #content
{
background: none repeat scroll 0 0 transparent;
box-shadow: none;
width: 100% !important; // I want to change width to 100% !important
}
Open up the inspector in your browser and navigate to the <body> tag and you will see something like this:
<body class="... postid-123 ...">
or
<body class="... page-id-123 ...">
See the documentation of the body_class() function in WordPress, which is responsible for generating these classes:
http://codex.wordpress.org/Function_Reference/body_class
You could also use a plugin which allows you to load specific css files for some specific pages.
This one for instance: https://wordpress.org/plugins/this-page-needs-files/
I want to change the scrollbar color in Firefox. How can I do that?
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
This is where a vast majority of the magic happens:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #969696;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
background: #2B2B2B;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
The only thing missing is for firefox to support this feature.
Since version 64 Firefox allows limited styling of scrollbars:
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
It is not possible directly via CSS.
But if you can use jQuery, jscrollpane may help you.
you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.
EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.
Well, I have heard someone saying "It's Impossible"...
But I don't believe in the impossible.
In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:
<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>
The Css will be:
.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}
.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}
Here are the final results:
(Note: The first image is the default scrollbar color).
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars
are shown in the window. This attribute is "replaceable"
in JavaScript. Read only
Firefox also has the following vendor specific properties:
overflow: -moz-scrollbars-none
other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.
for Firefox or cross browser you can use :
jQuery custom content scroller
more simple and easy to use
here sample i implement in magento and tested on firefox, opera, chrome and safari : http://i.stack.imgur.com/wnRCL.png
In Firefox V103 coloring scrollbar works with:
html, body{scrollbar-color: #f33942 #000;}