Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You shouldn’t modify Sight’s original files, as this prevents you from updating the theme without losing your modifications. Instead you should use a Child Theme or a Custom CSS plugin.
everything to be where it was meant to be, until I resized it
Can you elaborate on the issue? What’s wrong with the elements when you resize the browser?
Also, I can’t work out how to get the sidebar left border to always be connected with the top navigation and the footer borders.
In what instance isn’t the sidebar left border connected?
My other positioning problem in the little social share links that currently reside in the heading of the post pages. Their positioning is linked to the heading in single.php, I tried to make a new div for them but having no experience in the php area I didn’t get very far with that.
What is the issue?
Hi Andrew, thanks for the suggestion that I use a child theme, I saved a backup of the original style.css so I should be able to transfer my changes into a new child theme.
Sorry I wasn’t clear before in my post, I’ll try and explain again:
1. What I meant was that while all the sidebar was positioned correctly for the browser window size, when I made the browser wider, a gap appeared between the main content and the side bar, which was apparent as there was a gap between the top and bottom borders of the “lastest entries” heading on the home page and the left hand border of the sidebar (that gets bigger the wider the browser window is). Furthermore, if the browser is made narrower, the borders intersect.
This also occurs in chrome, and furthermore the sidebar is too high up and off to the left (it still looks correct in espresso’s browser when the window is resized).
2.
In what instance isn’t the sidebar left border connected?
If a post gets beyond a certain length (eg. this one: http://hookturnmelbourne.com/ipsum/) the sidebar does not expand so that it always spans from the navigation bar to the footer (which I would like it to do). If the post is a shorter one however, (eg. http://hookturnmelbourne.com/hello-world/) Then it is too big. I think the latter is partially a result of my hiding the pagenav and comment sections using the code ‘display: none;’ (comments are disabled) but not having have been able remove them entirely.
3. The issue here is that the soical sharing links seem to be tied to the particular div they are in, via php. No matter where I move their code in the stylesheet, or what values I fit in for their absolute positioning, they stay in that little div. I tried creating a new div that would display directly underneath the main content of a post, however this didn’t work at all.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
1. Can you apply position: relative; to <div class="wrapper"> then use right: 0; on the sidebar? This should resolve the additional space created when zoomed out.
That fixed the additional space when zoomed, thank you! The sidebar isn’t in exactly the correct postion now, but it is displaying consistently cross-browsers. Would I be able to safely change the top: and right: values to position it?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
2. Can you wrap your elements from <div class="slideshow"> to <div id="container"> in a div <div id="main">,
– Then apply position relative to <div id="main"> instead of the wrapper as before,
– Then add top: 0; on your sidebar
E.g HTML structure;
<div id="main">
<div class="slideshow"><div id="slideshow" >
<div class="slide clear" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 2; opacity: 1; width: 680px; height: 270px; ">
<div class="post">
<a href="http://hookturnmelbourne.com/ipsum/"><img width="335" height="290" src="http://hookturnmelbourne.com/wp-content/uploads/2012/09/Invitation-335x290.jpg" class="attachment-slide wp-post-image" alt="Ipsum" title="Ipsum"></a> <div class="post-category"><a href="http://hookturnmelbourne.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></div>
<h2><a href="http://hookturnmelbourne.com/ipsum/">Ipsum</a></h2>
<div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span> on <span class="post-date">Sep 16, 2012</span> • <a href="http://hookturnmelbourne.com/ipsum/#respond" class="comments_popup_link" title="Comment on Ipsum">No Comments</a> </div>
<div class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne in odium veniam, si amicum destitero tueri. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quid de Pythagora? Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos...</div>
</div>
</div>
<div class="slide clear" style="position: absolute; top: 0px; left: 679px; display: block; z-index: 3; opacity: 1; width: 680px; height: 270px; ">
<div class="post">
<div class="post-category"><a href="http://hookturnmelbourne.com/category/community/" title="View all posts in Community" rel="category tag">Community</a></div>
<h2><a href="http://hookturnmelbourne.com/hello-world/">Hello world!</a></h2>
<div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span> on <span class="post-date">Sep 15, 2012</span> • <a href="http://hookturnmelbourne.com/hello-world/#respond" class="comments_popup_link" title="Comment on Hello world!">No Comments</a> </div>
<div class="post-content">Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</div>
</div>
</div>
</div>
<a href="javascript: void(0);" id="larr" style="display: block; "></a>
<a href="javascript: void(0);" id="rarr" style="display: block; "></a>
</div>
<!-- Container -->
<div class="sidebar">
<div id="search-2" class="widget_search widget"><div class="search">
<form method="get" id="searchform" action="http://hookturnmelbourne.com">
<fieldset>
<input name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search">
<button type="submit"></button>
</fieldset>
</form>
</div></div></div><div id="container" class="clear">
<!-- Content -->
<div id="content">
<div class="content-title">
Latest entries
<a href="javascript: void(0);" id="mode"></a>
</div>
<div id="loop" class="list clear">
<div class="post-34 post type-post status-publish format-standard hentry category-uncategorized post clear" id="post_34">
<div class="post-category"><a href="http://hookturnmelbourne.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></div>
<h2><a href="http://hookturnmelbourne.com/lorem/">Lorem</a></h2>
<div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span>
on <span class="post-date">Sep 16, 2012</span> <em>• </em><span>Comments Closed</span> </div>
<div class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne in odium veniam, si amicum destitero tueri. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quid de Pythagora? Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Duo Reges: constructio interrete....</div>
</div>
</div>
<div class="pagination">
</div>
</div>
<!-- /Content -->
</div>
</div>
Which should result in this when zoomed out http://awesomescreenshot.com/074g7iib1
I don’t think I can do that because the css sheet isn’t in an html structure and this theme doesn’t have an html stylesheet. It’s one of the reasons I’m finding it more difficult, I’ve dealt with css that links to an external stylesheet before (I’ve put an example of my stylesheet below) but the external sheet has always been written predominately in HTML structure.
My code looks like this:
`body {font: 62.5% Georgia, Geneva, “Times New Roman”, times; background: #27292a url(“images/line.png”) 50% 0 no-repeat; padding: 24px 0;}
.clear:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
.left {float: left;}
.right {float: right;}`
.wrapper {width: 975px; background: #fff; margin: 0 auto; position: relative;
}
#container {padding: 10px 0 10px;}
//**Then there is the header and nav code***//
#slideshow, .slideshow {height: 270px; width: 680px; overflow: hidden; position: relative; border-bottom: 1px solid #d9d9d9;
}
.slide {height: 270px; width: 680px; background: #ffffff;}
.slide img {display: block; float: left; width: 420px; height: 270px; position: relative;top: -20px; left: -30px;}`
.slide .post {padding: 20px 30px 0; height: 250px;`
}
.slide .post-category {font-size: 11px; color: #d9d9d9; text-transform: uppercase; margin-bottom: 5px;}
.slide .post a {color: #000;}
.slide .post .post-category a {text-decoration: none;} etc. etc.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In the dashboard, on the home page’s Page Attributes, can you find out which template is assigned to that page?
That’s the file you ought to edit for the HTML, but again, any changes to original theme files will erase once the theme updates.
Sorry, but where on the dashboard should I be looking to see the homepage’s page attributes?
Would it be possible to make whatever changes I make part of he child theme afterwards?
