I used a snippet of code that I found on another thread here to implement a 'custom html' feature on my theme. It's like a 'sticky post', or an additional {description} block. It functions perfectly for its own purposes, but interferes with Tumblr's control buttons.
If the user opts out of using the feature (leaves the field blank) the tumblr control buttons disappear entirely, from the front page AND individual posts. If they do use the feature, the front page will display properly (control buttons intact), but individual posts will be missing the like/reblog/etc. controls.
I tried a temporary workaround by adding {LikeButton} and (ReblogButton} to posts, but inexplicably, the like button (but not the reblog one) behaves the same way - only displaying on the front page, or not displaying at all, depending on {ifCustomHTML}.
Here is the block:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
{block:IfCustomHTML}
<body class="page{CurrentPage}">
<div id="customhtml">
{text:Custom Html}
</div></body>
{/block:IfCustomHTML}
</div>
{/block:IndexPage}
And here is the styling, just in case:
#customhtml {
display:none !important;
font-family: {font:Post Body} !important;
background: url('{image:Post Background}') top left fixed repeat;
color: {color:Post Body};
margin: 0 0 10px 0;
padding: 10px;
position: relative;
-moz-border-radius: {text:Corner Radius}px;
-webkit-border-radius: {text:Corner Radius}px;
border-radius: {text:Corner Radius}px;}
.page1 #customhtml{display:block}
The entire code is here: https://raw.github.com/Teratoma/reduxredux/master/ReduxRedux
An example of the problem is here: http://reduxredux.teratoma.tk (scroll down and click on the first post permalink and hey presto! The control buttons vanish.)
I admit the code is cluttered and amateurish but obviously I'm still learning, so I appreciate anyone willing to look at my ugly coding.
Your HTML is invalid. You can't have more than one body element on a page, and they can't be wrapped in divs. Remove the opening and closing body elements from your CustomHTML block. It's important that the tumblr_controls iframe loads (the join / follow buttons in the top right corner), otherwise the like buttons won't work -- when your HTML is invalid the iframe might not load correctly. Fix that and all should be good.
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.
I'm trying to use window.loaction.replace() and discovered unwanted behavior.
The redirect works fine but it messes up my html structure.
It redirects to the wanted site but the top panel becomes a ghost. As far as I can tell the body structure behaves like it has a "negative margin the size of the panelheight". If I double the size of the panel with firebug it comes down.
The whole page looks like there is no panel at all after redirecting.
redirector: function(e){
window.location.replace(e);
}
The top panel is a nav element containing to ul's from which the right one is floated right. It is not fixed:
.panel{
display: block;
height: 42px;
position: relative;
z-index: 9998;
}
Even after manually reloading the page the bug doesn't disappear.
EDIT:
Same problem occurs if i redirect with PHP header: location...
The complete html,body moves up.
If I had to describe this bug in css it would look like:
html{
height:100%
position: absolute;
top:-40px;
bottom:40px;
}
Maybe it's useful for someone else:
The problem occurs if the calculated height of the content inside the body,html tags is higher than the body,html itself.
If the html,body have 100% height and inside the body are for example three elements:
Top Navigation Panel
Content Wrapper
Footer
And the calculated CSS height for these three element is higher than the body height it leads to this problem.
I don't know why it does only show up after a redirect but not if I navigate through links.
A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}
.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}
Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
I'm having Sticky footer issues with this site:
http://dev.epicwebdesign.ca/allshipsrise/events/
For some reason or another, The #page div is limiting itself to the header.
I can't figure this out. All tags are closed, etc. The W3C Conformance checker only complains about "the acronym element is obsolete. Use the abbr element instead.". That is wordpress's doing.
It's similar to Footer isn't at the bottom of the page However I have set clear:both on the footer.
The footer is fine when the page is too tall. I need it on the bottom even when it's not.
There were a couple underlying issues, mostly from trying to compensate for the real issue. (Not setting body height:100%) They're all sorted out now.
In your body set the height to 100% and your footer will be displayed until the end of your page :)
Or another work around would be changing the margin-top: to 100%
You have a few problems. With element.style you are using absolute positioning and raising it up 85px. Change that to position="relative" and remove the bottom attribute.
This:
element.style {
bottom: 85px;
position: absolute;
}
Becomes:
element.style {
bottom: 0px;
position: relative;
}
Removing position:relative solves the problem. Just remove this element using firebug and you will get the result.