I'm still trying to finish this theme I'm working on. Atm I'm trying to implement header support, and it's not going to well with my layout. Everything was fine until I added this line:
<img src="<?php header_image(); ?>" />
So, header currently looks like this:
<hgroup class="blog-header">
<img src="<?php header_image(); ?>" alt="" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php the_breadcrumb(); ?>
</hgroup>
Here's the thing, this works fine when there's no header image, however when adding one, it messes up my styling for the site description - which bumps up a few pixels from where it was. The title and the description is supposed to be inline with each other, and I'm not sure how to fix this without one of the scenarios making it wrong..
Here's my style for these:
.site-title {
font-family: 'Bree Serif', Georgia, serif;
font-weight: 700;
font-style: uppercase;
font-size: 30px;
color: #fff;
margin: 0 0 0 90px;
padding: 60px 25px 60px 0;
float: left;
}
.site-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #c9c9c9;
padding: 68px 25px 60px 0;
}
Ok this is going to be bizarre but if you go into your body class in your reset.css, and change line-height=1 to line-height=4px; it shifts it upwards. Or even just changing from 1 to 1px; it works.
Let me know if this works.
Related
I'm trying to apply responsive design in sendGrid. When I preview it in the website preview it is working, but when I send the test email and view it on mobile, I see that the #media screen has not been applied. Does anyone know what could be happening?
{{#if rewardData.deals.[0].coupon}}
<style>
#media screen and (max-width:300px) {
.teste {
width: 100% !important;
}
.firstDiv {
display: inline-block !important;
}
}
</style>
<div class="firstDiv" style="display: flex;
align-items: center;
border: 1px solid #D9D9D9;
border-radius: 8.49px;
padding: 16px;
margin: 35px 35px 25px 28px;">
<div class="teste" style="text-align:left; display: inline-block; margin-right: 16px">
<img class="max-width" style="border-radius: 8px" data-proportionally-constrained="true" data-responsive="false" src="{{rewardData.deals.[0].wideBanner}}" alt="Banner da recompensa">
</div>
<div class="teste" style="display: inline-block;">
<div style="display: flex; align-items: center; margin-bottom: 14px">
<img style="border-radius: 8px; margin-right: 8px" width="32" src="{{rewardData.deals.[0].icon}}" alt="Logo da recompensa">
<p style="display: inline-block; vertical-align: super">{{rewardData.deals.[0].title}}</p><br>
</div>
<b style="font-size: 12px; text-align: left; color: #2B332E">{{rewardData.deals.[0].shortDescription}}</b><br><br>
<b style="font-size: 12px; text-align: left;">Resgatar recompensa</b>
</div>
</div>
<div style="font-family: inherit; text-align: inherit; color: #000000; font-family: helvetica, monospace; font-size: 14px; margin-bottom: 50px; margin-top: 25px; margin-bottom: 25px; padding: 0px 40px">
<img class="max-width" border="0" style="color: #000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; vertical-align: bottom;" width="16" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/92d7128873c0e80b/6ee5ec4b-aaad-46cb-9c96-d5d61fb7231d/72x72.png">
<strong style="padding-left: 5px">Como usar minha recompensa?</strong><br><br>
<div style="line-height: 18px">
{{rewardData.deals.[0].description}}
<b>Seu voucher tem validade de até 30 dias para ser usado.</b>
</div>
</div>
{{/if}}
Many email clients do not support #media statements.
The website preview is a useful tool to preview your work, however it cannot show how an email will render across different mail clients.
Is there a way you can achieve your responsivenice without a media query?
Many mobiles are more than 300px wide, so try increasing the max-width from 300 to about 450.
Otherwise, take note of which email client you sent to and whether it supports media queries: https://www.caniemail.com/features/css-at-media/
There's quite a lot of code you use that is not supported. Email has an added layer or two to web design, in that email clients only accept a subset of HTML & CSS - more akin to HTML4 and CSS2, but there are lots of exceptions.
So, it may also not be working because flex is not supported, or align-items (flex is more widely supported, but all of the other parts of flexbox like align-items are very poorly supported).
I'd suggest you take a totally different approach and you'd need to research how to do a responsive HTML email as the topic is much too large for one question.
Question related to: How can i reduce the size of the background of an image or remove it
left and right arrows not showning in the page, tried many css font and content, i think there's something missing
#media screen and (max-width:800px){
.my-view-detail .timeline-posts .owl-prev span,
.my-view-detail .timeline-posts .owl-next span{
display: none;
}
.mobile-next-prev{
margin-top: -50px;
}
.set-button-left{
position: inherit;
float: left;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f104";
}
.set-button-right{
position: inherit;
float: right;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
}
}
#media screen and (max-width:680px){
.mobile-next-prev{
margin-top: -110px !important;
position: relative !important;
z-index: 1000 !important;
}
}
<div class="row .mobile-next-prev">
<div class="col-sm-12">
<!-- pre start -->
<?php if($previous){ ?>
<a href="<?php echo base_url('details/'.$previous); ?>" class=".set-button-left" ></a>
<?php } ?>
<!-- pre end -->
<!-- next start -->
<?php if($nexts){ ?>
<a href="<?php echo base_url('details/'.$nexts); ?>" class=".set-button-right" ></a>
<!-- next end -->
<?php } ?>
</div>
</div>
Do i need to include css file or something ?
Hope someone can help, i was working on it for hours without sucess
I used fontawesome 4.7v only, You may get solution for your question here =>enter link description here
It's probably very simple question, but for some reason I can't find a problem in my code. I have a Sencha Touch app. I define a itemCls in particular list class definition:
xtype: 'list',
store: 'Tenders',
itemCls: 'tenders',
onItemDisclosure: false,
itemTpl: [
'<div class="name">{name}</div>',
'<div class="description">{description}</div>'
].join(''),
And then I have some custom CSS definition where I'm trying to customize this particular list (not all lists in the application):
.tenders {
padding: 0.7em 0.7em;
}
.tenders .name {
padding: 0em 1.5em 0em 0em;
font-size: large;
font-weight: bold;
}
.tenders .description {
font-size: small;
font-weight: light;
padding: 0em 0em 0em 0em;
}
.tenders .x-item-selected {
background-color: green;
}
However selected item is not green. I can see in Chrome debugger the following classes attached to the selected item in the list:
<div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl tenders x-list-item-relative x-item-selected" id="ext-simplelistitem-211" style="min-height: 50px !important;">
<div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-436" style="display: none !important;"></div>
<div class="x-innerhtml" id="ext-element-563">
<div class="name">Name</div>
<div class="description">Description</div>
</div>
</div>
I also can see that .tenders { padding: 0.7em 0.7em } style is being applied, but not the .tenders .x-item-selected.
Any idea what am I doing wrong?
use:
.tenders.x-item-selected {
background-color: green;
}
to make your code more important that standard Sencha css either use the full path
.tenders.x-list-item.x-item-selected.x-list-item-tpl
or
background-color:green!important;
Do not add a space between tenders and x-item-seleced as they are on the same level, while name and description are inside the tenders div
I am using the WordPress plugin for newsletter subscription. I want to change the format for the mail its sending to user but don't want to edit core cause when anyone upgrade plugin all changes will flushed away so anyone knows how to rightly edit the plugin files without making changes in its core files thanks for the help in advance.
<body style="background-color: #ddd; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666; margin: 0 auto; padding: 0;">
<br>
<table align="center">
<tr>
<td style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666;">
<div style="text-align: left; max-width: 500px; border-top: 10px solid #43A4D0; border-bottom: 3px solid #43A4D0;">
<div style="padding: 10px 20px; color: #000; font-size: 20px; background-color: #EFEFEF; border-bottom: 1px solid #ddd">
<?php echo get_option('blogname'); ?>
</div>
<div style="padding: 20px; background-color: #fff; line-height: 18px">
<?php echo $message; ?>
</div>
</div>
</td>
</tr>
</table>
</body>
This the code in which i don't want blog name but want the logo of the blog and also want to change that style which is given on the html tags directly.
function mail($to, $subject, $message) {
ob_start();
include NEWSLETTER_DIR . '/subscription/email.php';
$message = ob_get_clean();
Newsletter::instance()->mail($to, $subject, $message);
}
This might be a function to include the email template file.
You want to use filters and actions, which can be specified by a plugin to give other scripts/plugins the opportunity to work with your plugin.
More specifically, hopefully you can find something like this:
$email_body = apply_filters( 'amazingnewsletter_email_body', $email_body );
This means that you can filter (aka, make changes to) the variable $email_body within your own plugin/theme. If you just want this for your current website, it's easiest to place these directly in functions.php.
However, the actual hook you are going to use depends entirely on the plugin. And even then, the plugin may not offer the ability to edit the body with actions or filters.
I suggest reading the WordPress.org codex about actions and filters to get a better understanding of how they work. They are very powerful.
I have few spans on my website , and i'm trying to make them go on the place I want them to , but it isn't going well as of now .
My HTML code:
<span class="forumname">מה שבראש</span><br />
<span class="forumname">מה שבלב</span><br />
<span class="forumname">תמונות הגולשים</span><br />
<span class="forumname">סקרים</span><br />
<span class="forumname">אקטואליה</span><br />
<span class="forumname">יהדות ותורה</span><br />
<span class="forumname">אתאיזם</span><br />
<span class="forumname">צבא וביטחון</span><br />
forumname Class in CSS :
.forumname {
color: black;
text-decoration: none;
font-family: Arial;
font-size: 14px;
position: relative;
top: 77px;
left: 720px;
font-weight: bold;
margin-top: 80px; }
And this is the result :
How can I align all of the spans so they can all start from the same position on the right ? Please Help me , i've tried everything , and i'm going crazy !
I tryed adding direction: rtl; to the span class, float: right and left; but with no success .
Thank you in advance ,
Iliya Vaitzman .
Just set text text-align: right on the parent element - DEMO
That really needs to be a list, spans is just the absolute wrong way to do it...
http://jsfiddle.net/calder12/xUSdv/1/
<ul>
<li>מה שבראש</li>
<li>מה שבלב</li>
<li>תמונות הגולשים</li>
<li>סקרים</li>
<li>אקטואליה</li>
<li>יהדות ותורה</li>
<li>אתאיזם</li>
<li>צבא וביטחון</li>
</ul>
li a{
color: black;
font-family: Arial;
font-size: 14px;
position: relative;
font-weight: bold;
margin-top: 80px;}
li{ list-style-type:disc;
margin-right:100px;}
ul{
text-align:right;}