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
Related
I would like to create a navigation with CSS/styled components for React Native (so no all styling hacks and attributes will work) that looks simmmiliar to this one that the Google Tasks app uses, see this image.
What I mean is mostly the floating "+" button, the "cut off" section from the "div" bellow it and having shadow that matches correctly.
I'm really not sure how to accomplish this, especially the cut off section in a div. So, if anyone could point me in a direction then I should be fine. :)
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!