I have a page in DW that has a black background. In Design View of the page the page shows as white instead of black. I am not sure why this is. I can add inline styles to the entire page as follows to get the page black:
<body>
<div style="background-color:#000" class="wrap_fullwidth">
<div style="background-color:#000" class="center">
<div style="background-color:#000" class="img-center">
<img src="image.jpg" alt="Image" />
</div>
<p style="background-color:#000"> </p>
</div>
</div>
</div>
</body>
Here is the CSS for the page and the way it normally is:
html, body{
font-size:16px;
font-family:"Lucida Grande", Helvetica, Arial, sans-serif;
line-height:23px;
color:#f3f3f3;
background:#000;
}
.wrap_fullwidth {width:100%; position:relative; float:left;
clear:both; padding-top:20px; }
.center{width:940px; position:relative; margin:0 auto;
clear:both; padding:0px 10px; display:block;}
p{ margin-bottom:20px; text-align:justify;}
.img-center{ text-align: center; }
The design view should show the page as it appears with css etc. I do not understand why the white is showing when the css clearly shows black as a background. The good thing is the page in the browser shows correctly but this makes things a pain if I work in Design View. (Which I do use)
Ideas or thoughts as to how to fix this?
Note: CS5 and CS5.5 did not have this behavior. Only CS6.
It turned out that my Reset for the CSS was causing DW to show a transparent background (thus white) instead of black.
The reset contained this property: background:transparent;
Once I removed that from the reset all worked fine.
Update: I had wondered if the way DW CS6 was reading the CSS if there was a bug or not, after filing a bug report I received this reply:
I was able to reproduce as per your steps and have logged a backlog item for the same. It will be fixed in future release.
Related
In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.
I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.
For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black.
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<p></br></br></br></p>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Resources</h2>
<h3 class="section-subheading text-muted">A Better way to learn Python.<h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
<p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
<p></br></br></br></p>
Sign Up Today!
</div>
<div class="col-md-6" style="text-align:center;">
<div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>
</div>
<div class = "row">
<p></br></p>
</div>
</div>
</section>
Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY
Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)
I have tried adding this under each section
<!-- About Section -->
<section id="about">
<div class="container" style="background-color: #ce0818;opacity:0.8;">
but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.
In context of our resources - you should put that background css to the section div not in container div
<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">
and to change the background to light grey write it in tag like
<body style="background:#cccccc !important;">
This is inline method which is not preferred much . You can use external css and write your css there and include that file in page
To use an external style sheet, add a link to it in the section of the HTML page:
example:
<link rel="stylesheet" href="styles.css">
and write
body{
background:#cccccc;
}
#about{
background: #24242a;
padding: 60px 0;
text-align: center;
}
or can include that css code in that page inside head tag example:
<head>
<style>
//write your style code here
</style>
</head>
teachyourself have that css written in css/main.css file
I am trying to use web safe fonts like:'Tahoma','Lucida','Helvetica' in an emailer for gmail but its not working everything is falling back to 'Arial'. I have tried 'inline css' but still no success but I have seen a mailer from 'Apple' using 'Lucida Grande'...any help will be appreciated
If you declare a font stack using inline CSS, system fonts will display in every version of Gmail (every web browser, every mobile client) provided said font is installed in system. Just like web pages.
<td style="font-family: Tahoma, Lucida, Helvetica, sans-serif;">
Text goes here.
</td>
For best results, place the inline font declaration on the lowest level HTML tag relative to the text.
✖ Not this:
<td style="font-family: Tahoma, Lucida, Helvetica, sans-serif;">
<span style="color: #000000;">
Text goes here.
</span>
</td>
✔ Instead this:
<td>
<span style="color: #000000; font-family: Tahoma, Lucida, Helvetica, sans-serif;">
Text goes here.
</span>
</td>
I need to create footer which will be just like small orange bar, and I need to make it responsive, I mean when I resized my window everything should be ok. How can I do that?
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by German")
</p>
</footer>
This is my <footer> tag in portal_normal.vm
To make your footer responsive, you can use Liferay supported Twitter Bootstrap classes, aided by your own custom styles controlled through media queries in custom.css of theme:
Example:
<div id="footer" class="row-fluid">
<div class="span12 text-center">
<p class="powered-by">
#language ("powered-by German")
</p>
</div>
</div>
Liferay Reference
In my custom.css I write this:
#footer {
text-align: center;
background: #ffa500
}
and get orange centered footer.
Has anyone seen this type of IE display problem?
Example http://xs133.xs.to/xs133/08465/ie_problem910.jpg.xs.jpg
Note that it is doing some sort of word-wrap/duplication when it renders.
The code for the brown box and the text that should be in it is:
<div class='span-23'>
<div class='span-7'>
<div class='info_box' style='height: 30px; padding-top: 10px'>
<div class='span-4'><b>Vehicle Full Term Premium:</b></div>
<div class='span-2' id='veh_ft_prem' style='text-align: right;'></div>
<div class='span-4'><b>Vehicle Written Premium:</b></div>
<div class='span-2' id='veh_writ_prem' style='text-align: right;'></div>
</div>
</div>
</div>
I'm using BlueprintCSS and the info_box CSS class is:
.info_box {
background: #fbe6a0;
color: #222222;
border-color: #222222;
padding:.8em;
padding-right: 0;
margin-bottom:1em;
border:2px solid #222222;}
Hmm.. sorry but I didn't see your problem.. even in IE6.
Well, there are several websites that are very good in CSS issues and etc.
Try http://www.positioniseverything.net is a very good one =D
Sorry if I couldn't help..
Nothing there looks like it even could cause that under the strangest of IE render bugs.
After a bunch of fiddling, it turns out that if you have a hidden object ABOVE the box I showed, that is the cause of the problem.
Sorry I didn't give you more information, but at the time, it did seem exactly as Patrick said and there shouldn't have been a IE render bug.
I hope that helps someone else out there!
Thanks!
I have a JSF form that needs to upload a file via an icon click (i.e. without showing the textfield/browse button of the file upload component).
Is it possible to trigger the file-open dialog and uploading functionality of the upload component via some other component type?
No, the file upload dialog is meant to be pretty much unchangeable as a security feature.
I don't think there's any other "off the shelf" component you could use to trigger the file-open dialog (which, after all, results from a <input type=file> written by the renderer).
However, if you're willing to develop your own renderer, it could write both the <input> and your icon's <img> (one right after the other). Give the <input> a css class that uses absolute positioning to place it on top of the <img> and reduces it's opacity to 0 (you could also set the cursor to 'pointer').
Now, when the user clicks on the icon, they're also clicking on the invisible input, which pops up your dialog.
(Now that I think of it, I'm almost positive you can do this without writing your own renderer by just applying the same kind of css to off the shelf components...)
With HTML5, there is new way to styling the css with bootstrap for example and replace image by a glyphicon.
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
width:32px;
font-size:24pt;
height:12px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<form>
<span class="btn btn-default btn-file btn-lg">
<span class="glyphicon glyphicon-upload"> </span> <input type="file">
</span>
</form>
</body>
</html>