I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}
Related
new to ASP.net core, how do I add background colour to the page using the cshtml? I am using the automatically generated page but this is invariable white with black text and it doesn't seem to like the use of inline.
In .net core application,there is a default layout in shared/_layout.cshtml.And each view will use the layout.And in _layout.cshtml,we often reference site.css in <head></head>.So if you want to change the background color of all the pages,you can change the style in site.css.Also, you can change the style in _layout.cshtml by.
For example,I change the background color of body:
In site.css:
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
background-color:red;
}
In _layout.cshtml:
<style>
body {
background-color:red;
}
</style>
Result:
You could also do something like...
<body style="background-color:red">
I have trouble finding the correct css code for changing the looks of a toast in Ionic 4.
In Ionic 3 you could use padding in css to change the look of a toast.
--min-height changes the height but it also places the message text to the top of the toast which I don't want.
I have this in my global.scss:
ion-toast.toast-mess {
text-align: center;
color: var(--ion-color-light);
font-size: 30px;
--border-radius: 30px;
padding: 50px;}
In the above code, padding is not taken into account, all other parameters work fine.
The default .toast-message says padding is available because it contains some default values.
How can I use padding again in custom css code, or something similar ?
Thanks
have you tried with
--padding-end
--padding-start
--padding-top
--padding-bottom
I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!
Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
change #container-large-desktop from ((1140px + #grid-gutter-width)) to ((940px + #grid-gutter-width)).
change #grid-gutter-width from 30px to 20px.
then download your custom version of bootstrap and use it. It should be 960px by default now.
I wanted the max width to be 810px, so I used a media query like this:
#media (min-width: 811px) {
.container{
width:810px;
}
}
Bootstraps gridsystem is FLUID. This means it works in percentages.
So just set a width to page wrapper, and you are ready to go
HTML:
<body>
<div class="page-wrapper">
<!-- Your bootstrap grid/page markup here -->
</div>
</body>
CSS:
.page-wrapper {
width: 960px; /* Your page width */
margin: 0 auto; /* To center your page within the body */
}
The easiest way is to wrap everything in a container like this..
.container-fixed {
margin: 0 auto;
max-width: 960px;
}
http://bootply.com/94943
Or, you can go with LESS/custom build: http://getbootstrap.com/customize/
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
i would like to ask how can i split my blogger header into two columns? Can you help me please? I'm having a hard time figuring out...
btw, i just need to add my logo at the left then google adsense on the right.
Thanks!
first you need to configure your blogger header max widgets. Check it if its more than 2. if not change it to (let's say) 4 and add the following css attributes under the #header & #header2:
float:left;
width:50%;
You'll be able to add new gadgets which is aligned horizontally. then add google adsense on the right and your logo at the left. Save your template and view!
Login to Blogger.com
Click on the "Template" section.
Click on "Jump to Widget"
Click on "Header1"
Under the code it jumps to, ie:
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Bog Tittle (Header)' type='Header'>
</b:widget>
</b:section>
Insert this code:
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
Now search for and find: "/b:skin"
ABOVE "/b:skin" insert this code:
#header {
float:left;
width:50%;
}
#header2 {
float:right;
width:30%;
}
You can adjust the percentages based on what you desire.
On the layout page, after you save the template AND REFRESH, you should see an "Add a Gadget" area to the right of your logo, where you can insert your adsense widget.
If things don't look right on the Layout page, place these codes below the other ones:
#layout #header, #layout #header2 {
padding: 0px !important;
margin: 0px !important;
width: 50% !important;
}
Remember to save your template and also remember to click REFRESH after you save your template.