I'm new at theme building and teaching myself, I hope I can explain myself properly:
When I add things to my tumblr sidebar, my expanded footer moves to the bottom of the sidebar. On my previous theme using:
<!--{/block:IfSidebar}-->
</div>
stopped this. On this one it does nothing as there is no call to action to start the sidebar that I can see, it's not negotiable.
I am using a heavily customized theme from a company who no longer provide theme support and updates, I'm using it as a template.
I know there is a simple answer to this, what am I missing?
http://thecomicartblog.tumblr.com/
Related
I have set up some website using GitHub Pages and used the Leap Day theme. Here's the repository containing the theme's original source code and this is how the template looks in practice.
Since I wanted to customize my website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file. Also in that file, I renamed the name of the original navigation bar that was present in the template already, and that is shown to the left of the website, to nav2. The custom (top-)navigation bar is called navi.
Well, after all, most of the website is running smoothly and does what it's supposed to do (presenting some project).
However, one problem has remained after the introduction of the additional top-navigation bar, namely that a click onto the name of a certain section or subsection of the currently shown website doesn't lead the user immediately to the start of the respective section any longer, but that what the user is going to see at the start of the actual website's content is somewhere below start of the requested section. As I understand it, the start of some section, e.g. Introduction, is moved to a certain height y on the website when the user clicks onto the Introduction-section's name in the left navigation bar. However, now that the additional navigation bar at the top has been added, such that all further contents have moved downwards, the position y, where the start of the section is shown, is hidden by some banner at the top of the page.
Therefore, I was wondering if anyone knows which of the many variables in the aforementioned css
file to change in order to move the point of onset of a section, y, further down on the website. I have tried changing a lot of parameters already, but I am unable to see which one controls the point I termed y.
To make my problem a bit clearer, please consider the following two images:
This is what is supposed to happen:
This is what actually happens:
Thank you very much in advance!
You could try some of the solutions listed in this StackOverflow question: Fixed page header overlaps in-page anchors.
The most common one appears to be adding padding-top to the a element equal to the height of the navigation bar.
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network
I'd like to implement a sidebar, where each entry will have an Icon along to it's text.
In deactivated state, the sidebar shall display only the icons, wheres in activated state, the sidebar shall expand to its whole width, showing its entries with both icons and text.
Just like the menu button in Expanding Menu Button, but this behaviour for the whole sidebar.
Can this be done using Semantic UI?
I have asked a similar question a while ago here, and I managed to solve it myself, by modifying some of Semantic-UI's source code.
Unfortunately, the modifications were too extensive to post them directly in this answer, so I have created a github repo with an example here. Hopefully it helps. Due to the fact that the source code from Semantic-UI was modified, normal sidebars will probably be buggy.
I'm building the following project website http://hpsfo.bitbucket.org and would like to add the twitter widget as part of the navigation bar to cover the need for announcements, project updates, "what's new" etc. While adding the twitter widget I bump into two issues.
The first issue is that I can't find the way to vertically align the widget correctly even when I inline the style like this <li style="vertical-align: middle;">, what shall I do here to get the correct middle vertical alignment? The second issue is that upon loading, the style is shown incorrectly and then it "loads" the correct button style on the fly, you can see this unwanted effect by refreshing the page. How can I avoid this?
UPDATE: the second issue seems to be related to remotely loading the js file from the twitter server. I think I could solve this by simply inlining the file into my project website.
I think you should just put
<li style="margin-top:10px;">
For performance issue, put as much as you can of your JS to the footer, so JS loads after the important stuff.