 |
| Before |
 |
| After |
I hope the title isn't misleading. There is only one sidebar in Dynamic Views, and that is under the Sidebar view. It has been set to a fixed width by default. In this tutorial, I'm gonna show you how you can change it.
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.sidebar #sidebar{
width: 250px !important;
}
.sidebar #content{
margin-left: 250px;
}
Adjust the values accordingly. It is important for the two values to agree to each other (they must be the same). Keep in mind that if you set your sidebar's width to be too large, you'll end up with very little room for your content area. This is a nightmare for viewers with small-screen display as there wont be any ways to view your posts. Use it with caution.
The main thing that annoys me about the Sidebar view is that my blog's background image is overlaid with a solid white one. Is there a way in Sidebar view to show the blog's background and make the sidebar to look more like an independent menu? If I am not making sense just check what happens on my blog [kansasbob.com] when you select Sidebar.
ReplyDeleteAs always thanks for this great tutorial Yoga!
That's a nice background. I can understand why you're annoyed. Here, try this:
Delete.sidebar #content{
background: url('http://3.bp.blogspot.com/-mOkQDGENHdc/T1PF00qKscI/AAAAAAAAF8g/aahoefuAj6k/s0/cityscape.jpg') fixed !important;
}
.sidebar #content .article{
background: white !important;
padding: 10px;
}
Cheers and God bless :)
Thanks Yoga! It worked!
Deletehi yoga thanks a lot for your tutorial! Its been a great help! :)
ReplyDeleteand yes its out of topic again! but well i can't find how to adjust the magazine view's width, not the selected post but the whole layout!
the adjusting width option doesn't seem to work! :(
ok i kinda got it figured out for a fixed resolution...but can't get it to change with different resolutions..is there a way out?
ReplyDeletehere's what i did,
#content{
width: 1200px !important;
}
Hi Ashneet,
DeleteHere's the code you need. I've also included the bits that you're gonna need to do the same in Sidebar view:
.magazine #content, .sidebar .article {
width: auto !important;
max-width: 3000px !important;
}
Cheers!
Hi is there a code that can help me adjust my main content width? I want it to take up the whole page. Thanks!
ReplyDeleteHi Angelina,
DeleteTry this:
.magazine #content, .sidebar .article {
width: auto !important;
max-width: 3000px !important;
}
Cheers!
Yoga, I have seen that by using this code, I automatically change the arrangement of the cards on view "Flipcard". Does that have a solution? Does that happen to you? I leave you a screenshot:
ReplyDeletehttps://lh6.googleusercontent.com/-dqCmuc-ib80/T5hBIDJNGNI/AAAAAAAACzk/wfq2Ej6mmus/s912/Sin%2520t%25C3%25ADtulo.jpg
Oops! Thanks for pointing it out. I've fixed it now :)
DeleteHi. I've been looking through your great site for a answer to my question but no luck. This is the closets topic I could find, therefore I'm asking it here. Hope you don't mind.
ReplyDeleteIs there a way to narrow the space between the links to my posts in the sidebar? As of now I could easily fit three times as much links on the screen. Not sure this is the case on all sites that used the sidebar dynamic view so I'm providing a screen shot.
http://i.imgur.com/8KSQo.jpg
Thank you in advance. :)
Regards,
John
Hi John,
DeleteGood question. Here, use this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#sidebar .item {
height: 20px;
}
#sidebar .item .title{
line-height: 20px;
}
Worked like a charm. Brilliant. Thanks so much!
Delete/John
Most welcome :)
DeleteHi thanks for all the amazing tutorials so far, been real useful.
ReplyDeleteOne more tweak which i can't figure out. Is it possible to set the height of the post, rather than it running off the page?
Cheers,
Rory
Hi Rory,
DeleteTry this:
.overview-panel .overview-inner{
height: 500px !important;
}
But keep in mind that this is not a good idea as your longer posts will get clipped.
Worked perfect :)
DeleteCheers,
Rory
Excellent :)
DeleteHi,
ReplyDeleteIs there a way to increase the width if the left panel when the pictures are sorted by labels (flipcard view)? My labels name are pretty large and they don't fit the current witdh.
Thank you
Hi mereverzi,
DeleteWe can't increase the width without damaging your main flipcard view (as they are all interlinked to each other), but we can force your label names to go on a new line. Add this to your CSS:
.group-label span{
display: block !important;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}
Cheers!
This is probably easy, but I'm stumped. . . how can I change the text color in the sideview boxes? (I've got the ellipses to come out white, but no luck with the actual text!) My blog is at www.thetravelgal.blogspot.com
ReplyDelete(Your blog has been a god-send as I've been moving to a dynamic view site.)
Thanks!
Cindy
Hi Cindy,
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#sidebar .item.selected .title a{
color: yellow !important;
}
#sidebar .item .title a{
color: white !important;
}
I've given you some degree of control here.. The post that is currently selected will be shown in yellow, and the rest will show in white.. Feel free to change them :)
That worked great. Thanks!
DeleteNext questions:
Is there a way to get the whole title to show in the sidebar, with wrapped text?
Is there a way to change the font?
Is there a way to enlarge the photos thumbnail in the sidebar?
I was so frustrated with Dynamic Views when I first started using them, but your help has made me soooo much happier!
The blog is at thetravelgal.blogspot.com
Thank you!!!
Hi Cindy,
Delete1) Try this:
#sidebar .item .title a, #sidebar .item .title{
line-height: 100%;
white-space:normal;
}
2) You mean the sidebar title font? Maybe. What font are you after?
3) Not without messing up the view, nope.
Cheers :)
That is soooo helpful! THANK YOU!
DeleteMost most welcome :)
Deletehi yoga,
ReplyDeleteexcellent blog,my question-is it possible to change date into topic name in sidebar.
Hi Anand,
DeleteI'm sorry that's not gonna be possible. Only static changes are possible at the moment, and they aren't very straight forward either.
Cheers :)
Hi,
ReplyDeleteI was wondering if there is a way to manually expand a blog post? I just downloaded a new template from btemplates.com and the templates comes with a read more function, which I don't mind but the images are small and to the left. It also shows alot of text in the summary. Can I manually adjust the width to show larger centered images and little text?
Thanks, Portia
Hi Portia,
ReplyDeleteSounds like you're referring to a custom third party script. I'm unfamiliar with it as it isn't default Blogger's script. Try contacting the author of the third party template, and see if you can tweak some fields to adjust the size of the image.
your website is a ma zing. i cannot thank you enough. i was wondering if there was a way to keep the sidebar list showing. as it is now, i have sidebar as my only dynamic view. but when someone goes to the site, they have to click on sidebar for the list to show. it would be awesome if the sidebar list didn't hide. not sure this is possible as i've done a lot of research and cannot find the solution.
ReplyDeleteHi Montronix,
DeleteI'm not quite sure what you're referring to. If you've chosen Sidebar view as your default view, you should be able to see your sidebar list without clicking anything. What's your blog's address? Perhaps I'll be of better help if I can have a look at your blog.
hello...thx for your help and reply. i have removed all other views per one of your posts so the ONLY view is sidebar. i'm using the blog as a sort of temp portfolio so i don't really want to post my blog's name on here. but if i can without everyone seeing it, let me know how and ill be happy to do so.
Deletewhen you go to my blog initially, the list does not show. only when sidebar is clicked does the page reload with the list. which is a little annoying. i would love for the list to show up on its own. i used all your tricks on here. so all the extra stuff like search bar, date ribbon, and the right gadgets are gone. there is only my title/header and the sidebar view and my posts.
i hope this makes sense.
perhaps it doesn't know this is the default? :) i used that css code where you delete lines in order to choose the views you want to show up if that makes sense. from your site.
thanks again. i hope this makes sense. :)
ok...i fixed everything so it's back plus i realized i never set sidebar as a default. so that's all good now.
Deletebut i cannot find the post about how to remove "posted yesterday by" anywhere for the sidebar view ...you know...getting rid of the date and author stuff. i used the other codes mentioned for other views but they did not work. thanks for your patience.
That's great! To remove the date and author info, add this to your CSS:
Delete.publish-info{
display: none !important;
}
Cheers :)
omg i selected the sidebar view in advanced template settings and it got rid of everything i had done!!! crap.
ReplyDeleteOuchhh.. I was going to ask you to backup your CSS and then change the default view to Sidebar from Template Designer.. But guess I was too late.. Sorry.. :(
DeleteHi,
ReplyDeleteI wonder whether its possible to put the sidebar on bloggers Dynamic view on the right instead of the left.
Richard
Hi Richard,
DeletePublished a post for you :)
Here:
Repositioning Gadget-dock from Right to Left in Blogger Dynamic Views
hi. is there a way to set sidebar view as the only(default) view mode? I want to only use the sidebar. Great website btw!!
ReplyDeleteYou bet! First of all, go to your 'Add CSS' box and backup everything that you have in there, as you'll end up losing these custom CSS code when you change your default view.
DeleteNext, go to Dashboard - Template - Customise - Template - choose the Sidebar option from the list of templates there. That is how you choose sidebar to be your default view. All the best :)
Hi Yoga,
ReplyDeleteYour post is a savior, but i have one more problem. Could you please let me know the following:
1. how to center the title in the sidebar title box.
2. how can I decrease the font of the title in the sidebar box.
Thanks in advance!
My blog: http://suresolution.blogspot.com/
Hi Pankaj,
Delete1) This should allow you to center align your sidebar post titles:
.sidebar .article .article-header .title {
text-align: center;
}
2) And this to decrease the font size:
#sidebar .item .title a{
font-size: 10px !important;
}
All the best! :)
Hi Yoga,
ReplyDeleteI am great fan of your blog tips. I am almost completed with my blog, now I can concentrate on the data part only. But I am left with only 1 thing, I am not able to design some good home page for my blog. (http://suresolution.blogspot.com/)
Could you please help me?
Hi Pankaj,
DeleteI'm not quite following. By home page, were you referring to a welcome/landing page of some sort?
Hi yoga please i need to enlarge my 2 side bars but finding it hard...dont know the size to put or where to post the code..http://swisscollectionsstyle.blogspot.com/on my blog
ReplyDeleteHi Enkay,
DeleteHave you tried going to Dashboard - Template - Customize - Adjust Widths? You need to increase the size for 'Entire Blog', and both 'Left Sidebar' and 'Right Sidebar'..
Cheers! :)
i tried that but when i make my pictures XL it over laps outside the body space and covers up part of my side bar contents....i was wondering if there's something i can do to space the side bar from the main blog post space so it does'nt over lap.
ReplyDeleteRight.. See if this is what you're looking for.. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 1250px !important;
}
Let me know how it goes :)
omg yoga ur a genius:-)...it worked like magic...
ReplyDeletewhat part of this world are you from? lol bless you man i appreciate..
sorry but one more favour i've been trying to rebrand my blog give it a black out back ground and to design a header that would fit the space above.most ones i got off google is ether too small or too large.
Hey Enkay, howfa?
DeleteI'm from Malaysia, but I speak good pidgin English :P
As for your background, you can set it to black by going to Dashboard - Template - Customize - Background - Choose the color black.
As for your header, you can't make small image large, but you can make large images small.. So get a large background, and see the following link on how you can set a custom size on your header image:
http://www.southernspeakers.net/2010/11/resize-blogger-header-image.html
All the best! :)
hello yoga...sorry to bother you...but i cnt seem to view my pictures when i upload them without publishing... i try to view and it comes out in HTML like codes ..... i dnt know but this happened after i used the code you gave me to expand my blog space.
ReplyDeletehttp://swisscollectionsstyle.blogspot.com
hey yoga....please am having a lot of problems uploading pictures telling me...There were errors during upload. We're sorry, but you have exceeded your photo upload quota..am a bit confused because i have not been able to post any pictures.please helppp....Thanks a lot in advance..
ReplyDeleteHi Enkay,
DeleteYou're probably seeing HTML codes coz you're in the HTML view of your post.. Click on 'Compose' tab to see the picture part..
As for the quota, how long have you been using your account? When you go to www.picasaweb.google.com, and when you scroll to the very bottom, what does it say in green? It should say something like 'You are currently using.. "
oh ok oopps lol thanks a lot yoga i really appreciate. my blog acct is just 6months old..so its all sorted now.:-) cheerz
ReplyDeleteRight.. Happy blogging Enkay :)
Deletein the sidebar view is it possible to put a scroll bar on the sidebar menu. it inst obvious that there are more links than initially displayed on the page and if you dont have a roller on your mouse its impossible to scroll down
ReplyDeleteNice thinking :)
DeleteHere, add this to your CSS. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.sidebar #sidebar, .ss{
margin-top: 12px !important;
overflow-y: scroll !important;
}
Cheers :)
hi hi :)
ReplyDeletei have the sidebar view as my only view. i have used all your codes to remove borders/shadows.....but the lines between the sidebar tabs (the list on the left with all the posts) still remain. and i can't find a post here about removing those lines. i dont' want to see lines/borders anywhere in the content section. can you help? thanks so much for everything!!!!!!!!!!!!
Hi montronix,
DeleteSounds fixable. But I'm gonna have to take a look at your site first, if I were to have a go at this.. What's your blog's address?
Cheers :)
I kept researching and i found the solution on your blog! woohoo!!! :) thank you thank you!
Deletenow i am wondering if there is a way to remove the thumbnails on the sidebar menu? (i just want the post titles without any little thumbnail next to it.)
thx so much!!
Here, use this:
Delete.sidebar #sidebar .items .item img.thumbnail{
display: none !important;
}
#sidebar .item .title{
left: 6px !important;
}
Cheers :)
thank you so so so much! i will def make a donation once i land a job! you are so generous with information and helping us fix our sites! thank you!
Deletei had one more question...do you have any idea why my blog title won't show in black? i have changed it to black so many times, and applied it to the blog and checked and it was still white. i just thought i would ask. thank you so much!
That's nice of you :)
DeleteAs for your blog title, I'm gonna have to take a look at your blog and inspect its element before I could suggest something useful. What's your blog's address?
ps the header background is black right now. i know that. :) i was also trying to see what it would look like to have the entire blog white with the header font in black. but there is also a weird non-white color in the background of the header even when i change it to white. i don't know why the font won't show black and the header background doesn't show in white like the rest of the blog. i just thought i should ask. thank you so much again.
DeleteHi montronix,
DeleteYeah sure. I couldn't open the link you gave in your comment though.. Error 404 URL not found.. Wrong address perhaps?
i figured it out! it's in a code i used from your blog. :)
Delete#header.header .title a h1{
color: white;
text-shadow: 1px 1px 1px black;
font-size: 17px;
}
:) i realize this is where i need to change the color (where it says white) :)
do you have any tutorials on here that do fun things like animating the colors in the header title? or anything like that?
thanks so much again for your patience. and help!
Yeap.. Inspected your blog.. Add the following code to your CSS to change your blog title to black:
Delete#header.header .title a h1{
color: #000000 !important;
}
Cheers :)
wow...cool! one more question before i leave you alone for a few days (heh :)
Deletehow do you change the color of the post titles in the sidebar list (for sidebar view)? i have tried all in advanced and they remain black. maybe this is already in a code i have, too?
thanks thanks thanks thanks thanks thanks you have some awesome karma, dude!
i was also wondering how to make the post titles go flush left, so they line up with the beginning text of the post. i use sidebar and the post titles center. which looks really odd. :) thank you!!!
DeleteSorry for the late reply. You can change the color of your post titles in Sidebar list with the following code (looks like you've already got this figured):
Delete.sidebar #sidebar .item .title a{
color: black !important;
}
As for left-aligning your post titles in Sidebar view, use the following:
.sidebar .article .article-header .title{
text-align: left !important;
}
All the best. Cheers :)
thank you thank you thank you! this is greatly helping. i had to get a temporary folio together because the real one is going to take time to sort through. i have barraged you with so many questions! :)
Deletei have one more, though (don't hate me)...
i was working on making the entire blog one color (i'm going to do it gray), but i can't remember how i did it before. it looked awful and i had to change everything back because some parts of the page seem to have their own rules. i can't get the color to change.
when you have time. :) thanks so so so much!
No prob :)
DeleteAs for your blog's color, have you tried using the Template Designer? Try going to dashboard - customize - advanced and change your font colors there..
Let me know how it goes :)
hi thx again. :)
Deletei can change the font color and you gave me code for the font that would not change. it's the post background.. like, i changed everything to gray (background stuff), but even though everything under advanced was changed to gray, the post section was still white. i don't know what i'm missing. i hope that makes sense. :) thanks again.
Owh, right.. Please refer to my tutorial below on how you can change backgrounds in DV.
Deletehttp://www.southernspeakers.net/2011/09/change-bloggers-dynamic-view-background.html
Let me know if there are specific elements that you can't change its color after applying the tweak in the tutorial above.
Cheers :)
fantastic! :)
Deleteit worked except for a couple of things are wonky now:
1-there's a white box highlighting the selected post right now that looks terrible and i would like it to also be the same color as the blog
and
2-the blog won't allow me to change the color of the text for the post title and the post content. it outlines in red when i enter the hex code (though i am using this color for the title and the sidebar menu items)
i would also love to change the color of the links in the sidebar menu. the link color items in advanced don't seem to affect the sidebar menu items.
and then after this i should be able to leave you alone for a while! :D
thanks so much again!!!!!! i am good at design, but i don't know anything about web design anymore...and this greatly helps.
hi again...i figured out the text color issue (same hex code but for some reason it did work at first at all)...
Deletebut the white box that surrounds the selected post in the sidebar menu is still there. :(
:) still doing research on your blog, though. thanks!
Hey,
DeleteHere's what you need to change the selected tab's background:
#sidebar .item.selected{
background: transparent !important;
}
And this for sidebar's link color:
#sidebar .item .title a{
color: pink !important;
}
All the best and happy blogging! :)
Cheers..
Yoga,
ReplyDeleteI want the default view to be magazine..I hope readers to see it in the magazine view only. How do i do that?
Hi Anon,
DeleteFirst backup any custom mod that you might have in your template by saving all the code that you can find under Dashboard - Template - Customize - Advanced - Add CSS, because this code will go away when you try to change your default view. If your 'Add CSS' box is empty, it's fine..
Next, still under Template Designer, click on Template (the top most link).. You will see lots of template options on the right.. Under Dynamic Views, choose the third template from left. That is Magazine view. Click on Apply to set this template as your default view..
To prevent your readers from clicking on other view options, see the following tutorial:
http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html
Good luck :)
Hey! Thanks for your guides! But i can't seem to find a way to make the pages sections any wider in the new dynamic views. Any ideas?
ReplyDeleteHi Otto,
DeleteGive this a try:
http://www.southernspeakers.net/2012/02/maximize-post-width-in-blogger-dynamic.html
Cheers :)
Hi Yoga,
ReplyDeleteThank you for all your great tutorials!!!
I hope my question is not too out of topic but I would really like to know how to make my sidebar list of posts static.
I have a very limited number of posts on my blog and would like to block the scrolling option that comes by default with sidebar mode in dynamic views.
Is there any way to do so?
Hi Pascal,
DeleteNeed some clarifications.
1) By static, did you mean you want to disable the scrolling option in the sidebar?
2) What's your blog's address?
Hi Yoga,
ReplyDeleteThanks for you quick response.
1. By static I mean that I would like to disable the default scrolling option between posts. I would like to disable the scrolling effect and have all my post topics (Cakes, Breads, etc...) visible the all time.
2. Here is the address of my catalog: http://www.kosherselected.com/
I really appreciate your help and interest in my technical issues :)
Hi Pascal,
DeleteI get what you mean. I've given it a preliminary try, and to be honest, I'm not sure if it is even possible to keep it non-scrolling. But I'll give it another trial. Could you get in touch with me via email, so that I can inform you of what happens, when I give it another try? Go to my G+ page and just send me a dummy email.
Cheers.
i m unable to implement any one of above mentioned codes. What i want to do is that grey sidebars that you can see on my blog i mean outer side i m not sure what you call that outer wrapper may be i want it to get close to the tabs ending borders from both side not affecting anything else. I hope you can help
ReplyDeletehttp://ptetech.blogspot.com/
Right.. I understand what you meant by sidebars, though they're called the outer wrapper actually. Anyways, I'm not quite getting it when you said you wanna get it close to your tabs ending. If you could gimme an annotated screenshot, we can really speed things up.
Deleteo i actually i have changed things i wanted from your other posts comments now what i want is that when i refresh my home page what happens is the first post title displays half cut from top i think i have messed things at that part of the code may be i have messed settings of my date header thats why this is happening i request you to visit it once you will see what i mentioned above i hope you can share a fix
Deletethanks
Why my blog posts are not getting updated in my profile in fact some of them were appearing before but now they have disappeared.
get back to me asap
http://ptetech.blogspot.com/
I don't see anything wrong in your blog. This is what I'm seeing --> http://i.imgur.com/9w5Vu.png
DeleteWhat am I missing?
ok this is what i see
Deletehttp://imgur.com/puo1x
I am not able to see what you're seeing, thus I could not offer a useful suggestion. Could it be a browser problem?
DeleteYoga can you help to get the color changed of my tabs. currently it is showing visited ones as black and rest as green i want it to stay black at all times without affecting the colors of other portion on blog
Deletehttp://ptetech.blogspot.com/
Hi Mahfooz,
DeleteTry this:
#LinkList3 a{
color: black !important;
}
Cheers :)
This worked like a charm. Thank you!
DeleteI can't say I'm following. What seems to be the problem?
ReplyDeleteoh that wasn't meant for you. it was a mistake. the problem is that i entered the css code to get rid of the header bar, but when i do that, it's still there...but it's clear/transparent/looks white. but i can see the text under it when i scroll up. i'll list all the css stuff here because maybe there's something telling it to do that. before the site got messed up, i used the code and the header bar was gone...which i loved. everything moved up so it was direclty under the title. right now that css code isn't there so it looks gray.
ReplyDeletehere is what i have:
#Classic.ss, #views ul li:first-child ,
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
.sidebar #sidebar .items .item img.thumbnail{
display: none !important;
}
#sidebar .item .title{
left: 6px !important;
}
#header.header .title a h1{
font-size: 17px;
}
sidebar #sidebar .item .title a{
color: #e6e6fa !important;
}
.sidebar .article .article-header .title{
text-align: left !important;
}
.overview-content .article{
background: #4d4d4d;
}
.sidebar .item, .sidebar #sidebar, .sidebar .item a{
color: #4d4d4d !important;
border: 0px black !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
.ss,.blogger-gear{
display: none;
}
#sidebar .item.selected{
background: transparent !important;
}
#sidebar .item .title a{
color: #e6e6fa !important;
}
.header-bar #search{
display: none !important;
}
.share-controls{
display: none !important;
}
#gadget-dock{
display: none !important;
}
#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
background: #4d4d4d !important;
}
.items.hfeed{
background: transparent !important;
}
.publish-info{
display: none !important;
}
.overview-wrap{
max-width: 2000px !important;
}
.viewitem-panel .viewitem-content, .classic li.item, .article, .ss {
max-width: 1750px !important;
}
.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}
#header .header-drawer, .ss{
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0); !important;
}
#header .header-bar {
box-shadow: 0px 0px 0px 0px !important;
}
.sidebar #sidebar{
width: 250px !important;
}
.sidebar #content{
margin-left: 250px;
}
.entry-summary{
text-align: justify !important;
}
also...i have entered the css code to justify text, but does that code work for all dymnamic views? i got the code from a question about magazine view methinks.
i hope this makes sense. the header bar is there right now. it's just gray. i want it gone, but with the css code to remove it, it turns white or looks white (but it's prob just transparent) so under the header you see a white stripe. and i don't know what in the code above i need to change to make that stop so the code to remove the header bar will work like before.
thank you thank you thank you!!!!
i'll put the site in another post so you don't have to publish it.
i hope this makes sense. thanks so much.
i don't know if that last comment went through because i wasn't signed in. so i will rewrite it again. sorry if you get it twice.
ReplyDeletewhen i entered the code to remove the header bar totally, it turns into a white bar...but it's prob transparent because i can see the text under it when i scroll up. i don't know what in the css code is creating this conflict. below is all the css code i have used:
#Classic.ss, #views ul li:first-child ,
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
.sidebar #sidebar .items .item img.thumbnail{
display: none !important;
}
#sidebar .item .title{
left: 6px !important;
}
#header.header .title a h1{
font-size: 17px;
}
sidebar #sidebar .item .title a{
color: #e6e6fa !important;
}
.sidebar .article .article-header .title{
text-align: left !important;
}
.overview-content .article{
background: #4d4d4d;
}
.sidebar .item, .sidebar #sidebar, .sidebar .item a{
color: #4d4d4d !important;
border: 0px black !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
.ss,.blogger-gear{
display: none;
}
#sidebar .item.selected{
background: transparent !important;
}
#sidebar .item .title a{
color: #e6e6fa !important;
}
.header-bar #search{
display: none !important;
}
.share-controls{
display: none !important;
}
#gadget-dock{
display: none !important;
}
#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
background: #4d4d4d !important;
}
.items.hfeed{
background: transparent !important;
}
.publish-info{
display: none !important;
}
.overview-wrap{
max-width: 2000px !important;
}
.viewitem-panel .viewitem-content, .classic li.item, .article, .ss {
max-width: 1750px !important;
}
.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}
#header .header-drawer, .ss{
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0); !important;
}
#header .header-bar {
box-shadow: 0px 0px 0px 0px !important;
}
.sidebar #sidebar{
width: 250px !important;
}
.sidebar #content{
margin-left: 250px;
}
.entry-summary{
text-align: justify !important;
}
also, as you can see the last code is to justify text, but does this code work for all views? i use sidebar, but i got this code for a question regarding a different view.
right now the bar is gray because i don't have the css code on there to remove it totally. but it want it gone. please help. :)
thanks so much again.
Hey,
DeleteHave you got it fixed? I don't see the white header bar any longer? But your code is still repeating itself in your source..
Cheers..
hi
Deleteno... I removed the code that deletes the header bar. so the header bar is there. it's gray. if I add the code, it turns white or transparent. that's why I included the code above. I thought perhaps there was a conflicting code.
I don't know why it's repeating still because I removed it. it's not in CSS code anymore. and the whole reason why my page got messed up was because I went into HTML and deleted all the repeating code for statcounter.
but I'm really just wanting the header bar to go away. do you see any reason in the code above that would make it transparent or white?
thanks!!
HI AGAIN. SO I CREATED another blog just to test stuff without that statcounter code lingering around. and no matter what i did, that header bar is white or transparent. it looks like a white stripe, but i think it's just transparent. i even added the code from the blog mentioned above...one by one to see where the problem might lie. but i could not find it. no matter how i tried to remedy it, it won't go away the way i had it initially where there was no header bar. so i am at a loss. perhaps you can see something in the code that is creating a transparent bar even though there is code to remove it at times. (though the code i provided doesn't have the css code to remove the header bar becuase creative directors are looking at my folio and i don't want that weird white stripe there.)
ReplyDelete:( help. xx
Hi there..
DeleteI'm gonna have to reiterate what I've said earlier. You're seeing these weird effects in your blog because of the repeating code in your 'Add CSS' box - no doubt about that. As long as you don't get it fixed, most probably you won't be able to use the usual tweaks that would work on other blogs. I'm not saying we can't fix the header bar issue, but you're definitely gonna run into more problems if you don't get the whole blog fixed. If the code has been repeating itself even after you've taken care of it, that could be a browser/add-on problem. Try using a fresh copy of firefox or chrome to get your code fixed. And nope, don't try to fix it using Edit HTML. Fix your code within 'Add CSS' itself. You just have to remove all but one set of code, preferable the most recent one, and delete all other duplicates..
That said, here's what you can use for now to hide your header-bar. Add it to your 'Add CSS' box, towards the end of your current code.
#header:hover .header-drawer, #header .header-drawer.open{
display: none !important;
height: 0px !important;
}
#main{
position: relative !important;
top: -35px !important;
}
#sidebar{
top: 65px !important;
}
body{
background: #4D4D4D !important;
}
Do note that this code is less than ideal, and I've only given this as a temporary measure since you're getting your blog assessed by the directors. You really ought to get the rest of the code fixed in the long run. All the best :)
i hear you. I'll reinstall Firefox. there definitely isn't any code in CSS so I didn't know what was up. maybe that's why the new blog I was testing also didn't work. I'll get a new version of the browser and see it will remedy the repeAting ghost code.
Deletethanks so much. I won't go into HTML :)
If you were using Firefox, I think it'd be better if you try with Chrome next. So, how was the previous code? Did it work?
Deleteit looks like it worked...but i will heed your advice and redo it in chrome. though, i don't quite understand...if i don't see the repeated code there, either...then...?
Deletebut i think i'll rebuild a new blog url and just use that and forget about this one because it seems to be corrupted.
thank you very much....! i'll let you know what happens. i truly appreciate it so so much!
so i started a new blog as a test on chrome. i re-entered all the css code i wanted (except for the fixer you provided for the messed up older blog). i also added the code to remove the header bar altogether:
Delete.header-drawer{
display: none;
}
and there is still a white bar there...? also, i have all the hex codes for the same color, but the top header bar now is showing lighter or a gradient. i am so confused. prior to all of this messing up, everything worked perfectly and easily and the entire blog was the same color.
here is the test http://mtfolio.blogspot.com/
:/ i am confused.
That's strange. BTW, I couldn't look at your test blog as it is set as private..
DeleteIn any case, do you wanna get in touch with me via email? It'd be easier for us to communicate. Header over here and send me a dummy contact request.
Cheers.
Wondering how to make sidebar widget titles stay visible. They fly/roll out by default. Is it possible to make them stay out?
ReplyDeleteSorry for the late reply. Are you referring to the part where it rolls when you click on one of the bottom links? What's your blog's URL anyways?
DeleteHi Yoga. First, I just want to say you're a life saver! I would never be able to make awesome blogs without your help!
ReplyDeleteI have a Dynamic Sidebar theme template and I think I've gotten everything figured out except a few things:
1) How do I make the sidebar tabs scroll instead of being fixed with the page when you scroll?
2) Also, when you scroll and the tabs scroll with you, there is an annoying white background behind them (on top) that I cannot change! (Might not have to change this if the scrolling problem is fixed)
3) How do I remove shadows/border from the tabs? And from the post section? (They seem to be light grey.)
4) How do I center EVERYTHING (sidebar and posts) under my header? If that is possible.
I hope this isn't too much to ask!!! Thanks again!
Hi Mandy,
DeleteIt'd be easier if I work on your blog straight away, instead of suggesting something generic. What's your blog's address?
Sorry for the late reply btw.
Cheers :)
Hi Yoga, two more questions...
ReplyDeleteIn Hebrew you write from right to left and this causes some anomalies... One of these anomalies is that the comments-counter in the sidebar appears to the right of the title, not to its left...
See here using the sidebar display:
http://ofer-megged-phys-notes.blogspot.co.il/
Is there a way to switch positions?
Also, is there a way to change the counter's background color? The color of the number?
Thank you,
Ofer.
Hi Ofer,
DeleteI'm afraid I don't see a way forward to bring the comment bubble to the left. I've tried, it just won't move as it is loaded in that particular order (title - bubble). But here's how you can change the color:
.bubble.comments-count{
background-color: red !important;
border-color: red !important;
color: yellow !important;
}
.bubble.light .bubble-tail{
border-color: red transparent transparent !important;
}
Cheers :)
Thank you a lot, and apology for the bother. Writing from right to left always invites annoying anomalies as far as computers are concerned...
ReplyDeleteI bet..
DeleteI made the Sidebar view the only view for my blog but my width won't change once I add the CSS code -- any help appreciated!
ReplyDeleteHi Cory,
DeleteI can't see the code for making your sidebar wider anywhere in your template. Also, it seems like some of your CSS codes are repeating itself multiple times. Get it fixed (by deleting the duplicates), and make sure your newer codes are getting saved (by rechecking your 'Add CSS' box after restarting your browser.)
Dear Yoga, I have a problem. I am using the Sidebar view template. If someone visit my blog directly using URL sidebar appears. When a old individual post is viewed(when come using a keyword from search, sidebar is not showing up. Can you please help me on this. My blog is techandwe.com
ReplyDeleteHi Kartik,
DeleteThis is a bug within Dynamic View itself. It has been highlighted and made aware of to Google awhile ago, but nothing has been done so far. I'll try to nudge the thread again.
Hi,
DeleteGreat blog Yoga!
I have the same problem.
Can we put a high image in the sidebar (1x5000px) ??
or
use auto scroll to: data-id="last post" ??
This problem exists in all dynamic views :(
Hello Leszek,
DeletePlacing an image might distort the cosmetic of your blog, while adding a script is still a taboo in DV templates I'm afraid.
Thanks for all the gret info.
ReplyDeleteis there any way I can enlarge the gadget bar in the magazine view?
cheers, sofia
www.sofianaaustralia.com
Ho Sofia,
DeleteSorry for the late reply. Here, this should work:
.gadget-icons{
height: 80px !important;
}
#gadget-dock, .gadget-icons{
width: 80px !important;
}
You're gonna have to use a larger set of icons now. And do note that the bigger your icons, the more difficult it will be for some of your readers to see your some of your icons (the ones that are places towards the bottom of your gadget-dock)..
Cheers :)
It work!!! thanks!
Deletedo you know if I can have two gadget dockets. one on the left side and one on the right? or if not, is there anyway i can shift the post more to the left?
Thanks again Yoga!! dynamic views only works because of you!!
Hi Sofia,
DeleteIt is not possible to have dual gadget dock, as there isn't a way to replicate the structure of the dock using what is available to us (most of the stuffs that power up DV templates are hosted at Blogger, and we don't have access to it.) But I think we can shift the post towards the left a little bit. Let's have a look at your blog. What's your blog's address?
Cheers :)
Oh my goodness, am I ever happy to have found you Yoga! I've been looking around your site and am so grateful for your information.
ReplyDeleteI have a side bar ad that is 300x250 however my side bar isn't that wide. I thought of using your code to change the width of the side bar but I'm nervous! What if I make the post area to narrow? (I don't know why the page isn't a bit wider.) What if I add this code and mess up my blog?! Ugh. Any advice for a nervous afraid-of-coding blogger? :->
Thanks again for your generous sharing of information Yoga!
Hi Ann,
DeleteA couple of things.
1) CSS code is the least-harmful code there is. It's like wearing shoes. If you don't like it, you can just take it off by deleting what you've entered :)
2) That said, the code in the post above is not meant for non-dynamic templates, like the one you're using right now. But I can prepare some specific CSS code for you as you like. Do you wanna increase the size of your sidebar to accommodate this code? It'll be better if the ad is already placed so that I can adjust the sidebar size to fit just nice.
Cheers :)
Hi, so I tried the code and it didn't work. Is there something else I could try? Can you help?
ReplyDeleteHi there,
DeleteI don't see the code in the tutorial above anywhere in your template's source code. Have you got it removed?
Hi, do you know how I can move my sidebar up so that it is closer to my header bar.
ReplyDeleteHere's my blog: www.ironammonite.com Thanks very much. Your blog is incredibly useful for helping people get the most our of dynamic views.
Hi Paul,
DeleteThanks :)
See if this is what you're looking for:
http://www.southernspeakers.net/2012/03/adjust-gadgets-vertical-position-in.html
Cheers :)
Hi Yoga, thanks for this. I still have a problem: There is this *unreasonably wide* space between all my post body and the post itself. Also, how to i add a gadget wide enough for a 768 x 90 adsense add just below my header?
ReplyDeleteOne more thing Yoga, It seems my sidebar width didn't change even after adding the css code. why?
ReplyDeleteHi there,
DeleteYou seem to be using a custom template, that uses a structure that is very different from the default Blogger templates. Have you tried contacting the maker of this template?
Hi Yoga,
ReplyDeletecould you please give css code to disable selecting and copying data from blog.
Thanks in Advance :)
Hi there,
DeleteUnfortunately, CSS code does not have the ability to make structural or operational changes. We need Javascript for that, but again, unfortunately, there isn't a feasible way to add scripts to Dynamic View templates.
hello yoga, my name is oluwafemi, i am very happy to get to this helpful website. please i have been trying to design my own blog like soo many people need but all my effort end to vain. but since i get to this website i am now learninng some tips on how to design my blg proffrsionally. but what i want to ask now is that how can i add some clickable advert on mny sidebars as you did
ReplyDeleteplease this is my blog, i want you to help me check it and tell me what i should do www. dynamicinfomation.com thank you very much. i will be grateful to have your reply. thanks.
ReplyDeleteThere are many ways to insert ads, and I gotta admit this isn't really my area of expertise. But the basic principle goes like this - you find a sponsor, you make an agreement with them, they pay you a small amount for the adspace. I let Google's Adsense to take care of these stuffs for me. Look it up. You need to get approved for the programe, and that's the hardest part.
DeleteHaving issues with a lot of extra background space that goes beyond my set blog widths, header, and nav bar. Can't seem to figure out what's going on. artseachic.blogspot.com Thanks!
ReplyDeleteThis should solve it. Add it to your 'Add CSS' box:
Delete#wcddmenu{
width: auto !important;
}
Cheers :)
Fabulous, thank you!
DeleteI don't think the mobile view can be separately modified.
ReplyDeleteThanks Yoga for your help, I didn't think there were fixes for a lot of the problems with the dynamic view but I've been on your site all day making tweaks to m blog
ReplyDeletetapedecksandashtrays.blogspot.com
Most welcome Edgar :)
DeleteThank you so much for all your help editing blogs. I have not seen any resolutions for changing the font in the side bar to a different font than what the post title is. Do you have a fix for this?
ReplyDeleteCodes to changing fonts can be really specific. Do you have a particular font in mind?
DeleteDoes not work in Mozilla and IE
ReplyDeleteWorks just fine:
Deletehttp://imgur.com/fZHALhK
hy
ReplyDeletemy blogger template is busby
bro how can i adust sidebar width ur gived codes are not working pls help..
Hello there,
DeleteWhat's your blog's address?
Hello there Yoboy,
ReplyDeleteFirst off, I want to thank you for making this blog. Every little change is explained so well, and with the ready to paste codes almost everything worked instantly! Keep it up! :)
But here's my problem. I searched on the site for a post about it but i couldn't find it.. I have eliminated all views in the menu, exept the Magazine (which is also my default view), and the Sidebar button. In my magazine view, there is a top post that uses the full width, and below four more compact 'blocks'. Thats all cool, but below that the posts are only 3 blocks in width.. so there's a white space at the right. I want them to be 4 blocks, like the top post! Can you help me?
Here's my blog for example:
http://seck1.blogspot.nl/
Thank you!
Hello SECK1,
DeleteHave you got this sorted? Coz I'm seeing a full 4-block width for the bottom posts (after the top two layered structures). Could you send me a screenshot of what you're seeing if this is still an issue?
i want gadget space in right side in flipcard
ReplyDeletecheck it if u can help
www.shopforfree.in
I'm not sure if I'm picturing it right. Could you elaborate more?
DeleteThanks for Sharing! I want to increase/maximize my website right side bar. It has three columns. How to do it?
ReplyDeletehttp://www.spreadingyouinfo.com
You're not using Dynamic View template. In fact, you're using a third party template. You may want to contact the maker of your template.
Deletehi thanks for the tip i want increase the thumbnail picture in side bar I hope you know how to do it
ReplyDeleteHello. That depends, are you referring to your profile gadget, or some other gadget? In any case, I'll have to see your blog to give a proper advise.
DeleteI want to increase the width of sidebar,i have applied properties,but it is not working.
ReplyDeleteWhat's your blog's address?
DeleteGreetings, I tried to turn on mobile views and it totally wrecked my template. This is what it looked like: http://web.archive.org/web/20160403031634/http://www.bookreviewsandmore.ca/
ReplyDeleteWith the help of your blog I have it about 90% back when i want it. Just wondering if there is any way to Have the side bars use the whole space and get rid of the boarders? and second for blog archive how to move it over so every title does not take so much space. Your assistance would be greatly appreciated.
Hello Steven,
DeleteSorry for the late reply. For the archive, you could probably make the fonts and the space smaller:
#BlogArchive1{
font-size: 10px !important;
line-height: 9px
}
As for the sidebars, do you mean you want your sidebar contents to be closer to the sidebar's border, and the black thick border gone?
I eventually got it, going line by line in the code and trial and error. Thank you.
DeleteHey YOGA, Not yet fixed!
ReplyDeleteI used your following code to make my side bar permanently visible:
#gadget-dock{
position: fixed !important;
right: 0px !important;
}
Then I used the following to manipulate the size of the sidebar. Nothing happened (The code above worked, but the width didn't increase)
Hello NutriMonk,
DeleteI'm afraid the gadget dock in Dynamic View is extremely unstable. I stopped developing any codes for it for this reason - they work one day and they stop the next.
Hello Yoga, your blog helps me very much!! Thanks
ReplyDeleteMy question is:
Can i del left sidebar with Sidebar dynamic theme ??(i also read your post about "remove-blogger-sidebar-and-maximize", but i dont want to do that way with redirecting into Landing page/post... )
Thanks your listen