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>
Related
I am trying to simulate double clicking on an object in internet explorer.
Here is the HTML code:
<tr class="selected lead" style="height: 19px;">
<td class="sort-column" style="width: 1200px; line-height: 17px; text-indent: 19px;">
<img class="bi-tree-view-expand-icon" alt="" src="/resource/image/bid/triangle_collapsed_16.png">
<img class="icon" alt="" src=" /resource/image/bid/folder_closed_16.png">
My Content</td>
<td class="horizontal-filler" style="width: 100px;"> </td></tr>
And the VBA code (which is currently working):
For Each Btn In IE.document.getElementsByClassName("sort-column")
If Btn.innerText = "My Content" Then
Btn.Click
Exit For
End If
Next Btn
I can see the code pressing my button, but what I need is a double click of the button. Any help is greatly appreciated. Thanks!
I spent some time on this and couldn't find a universal answer. It seems any particular method that fires synthetic events may not work depending on a browser's preferred method, control inheritance, and other factors.
Assuming the event is supported, initialized, and has a listener then one of these may work for you.
If your using Chrome, Firefox, or IE 9 and below
Btn.FireEvents("ondblclick")
Except IE 8 which reportedly wants focus on the object
Btn.Focus
Btn.FireEvents("ondblclick")
And if you're on IE 10+ and above then you'll be more successful with:
Btn.dispatchEvent("ondblclick")
I'll be back after building a project to try these out. In the meantime I hope this points you in a helpful direction.
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 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.
I am a beginner using Orchard CMS (and web design in general). I'm having trouble styling the output of blog pages on my site. Many of my pages have custom HTML to create a background for text. I would like to re-create this background on all blogs created through the Dashboard.
I've looked all through this site and Google for the past few weeks trying to find information, but I can't find anything substantial that isn't completely over my head.
I removed some information for privacy reasons, but basically the code creates a container where I can place my content. Here is the (revised) code for the background:
<table style="float: right" width="100%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 21px;"><img src="src.gif" /></td>
<td style="background-image: url('src.gif'); font-family: Arial, Helvetica, sans-serif; color: white; font-size: 15px; font-weight: bold;">
<span style="float: left">[Redacted]</span>
<span style="float: right">
<script language="javascript">
var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");
var monthNames = new Array(
"January","February","March","April","May","June","July",
"August","September","October","November","December");
var now = new Date();
document.write(dayNames[now.getDay()] + ", " +
monthNames[now.getMonth()] + " " +
now.getDate() + ", " + now.getFullYear());
</script>
</span>
</td>
<td style="width: 21px;"><img src="src.gif" /></td>
</tr>
<tr>
<td style="background-image: url('src.gif');"></td>
<td style="background-color: #fcfefc;">
<!-- Content goes here -->
<!-- End Content -->
</td>
<td style="background-image: url('src.gif');"></td>
</tr>
<tr>
<td><img src="src.gif" /></td>
<td style="src.gif');"></td>
<td><img src="src.gif" /></td>
</tr>
</tbody>
</table>
Here are my questions:
How do I style my blog(s) and every blog page so that all content falls within this container?
How do I change the output of the 'excerpt'? The default length of the blog excerpt cuts off in strange places. I want to be able to control this.
Aside from orchardproject.net, can anyone recommend a good place to find Orchard documentation for beginners? I feel the learning curve is steep for me, but I'm committed to learning Orchard. Can you recommend a good place to start so that I can get a good base for this type of stuff?
I'm quite a beginner, but I'm trying to get better, so please bear with me. I have almost no .Net or C# experience, and my CMS knowledge is basic (Wordpress).
Thanks for reading!
In your theme, override the content.cshtml template so it includes your html instead of what's in the default one. The original template shows how to add zones into which content will get inserted (typically something like #Display(Model.Content).
Override the content summary template. See http://weblogs.asp.net/bleroy/archive/2012/07/01/my-body-summary-template-for-orchard.aspx
http://docs.orchardproject.net/Documentation/Orchard-TV
If I may, I'd like to make some comments on your markup as well:
Table should not be used for layout but only for tabular data.
Inline styles should not be used and should be replaced by styles defined in stylesheets.
That script should not be added inline but rather should be in a separate file, and included using #Script.Include so that if the template is rendered more than once for whatever reason, the script is not added as many times.
The script is polluting the global namespace.
The script is not localizable.
Instead of that client-side script, you should probably use server-side code, which by the way already knows day and month names in all cultures of the world. #DateTime.Now.ToString("dddd, MMMM yyyy") should be able to replace that whole script block.
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.