Search Results for 'css'

hi,
to decrees the size of the menu on desktop use this css:

.td-menu-header ul.sf-menu li a {
  font-size: 13px;
  padding-left: 4px;
}

here: http://screencast.com/t/zpzAGXgV6n

———————
to make the home icon disappear on iPad :

#td-top-menu ul.sf-menu li:first-child{
  display:none ;
}

here: http://screencast.com/t/zbNt4cLcQW

—————-
the mobile menu is showed under 768px : http://screencast.com/t/KSnkUv8WN

Thanks for you message.
Radu A.

• This reply was modified 12 years by Radu A.

hi,
well, you can write less chars,

also you can use this css to increase the box size on mobiles :

div.td-sbig-title-wrap a.noSwipe {
 display: block;
 height: 40px !important;
}

here: http://screencast.com/t/1jg2XqVlW9z

Thanks for you message.
Radu A.

All that should go *after* the normal #END WordPress elements …

example (from one of my sites; using custom permalinks – don’t copy the elements for #wordpress or the mod_pagespeed stuff !)

<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters insert_dns_prefetch
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

AddType text/javascript .js

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2500000 seconds"
ExpiresByType image/jpeg "access plus 2500000 seconds"
ExpiresByType image/png "access plus 2500000 seconds"
ExpiresByType image/gif "access plus 2500000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds"
ExpiresByType text/css "access plus 700000 seconds"
ExpiresByType text/javascript "access plus 700000 seconds"
ExpiresByType application/javascript "access plus 700000 seconds"
ExpiresByType application/x-javascript "access plus 700000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# END Expire headers

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>
<IfModule mod_alias.c>
RedirectMatch 403 /xmlrpc.php
</IfModule>

ALSO: don’t include the last three lines if you are allowing trackback/pingbacks or using email to post via XMLRPC.

Don’t forget you need to have gzip/deflate running on your server also, which alone is good for 20 points!

And if you’re curious here’s my robots.txt file

User-agent: *
 Disallow: /cgi-bin
 Disallow: /cgi-bin/
 Disallow: /wp-admin
 Disallow: /wp-admin/
 Disallow: /wp-includes
 Disallow: /wp-includes/
 Disallow: /wp-content/plugins
 Disallow: /wp-content/cache
 Disallow: /wp-content/themes
 Disallow: /wp-content/upgrade
 Disallow: /wp-content/backup-*
 Disallow: /aff/
 Disallow: /search/*/*
 Disallow: /trackback
 Disallow: */trackback
 Disallow: /trackback/

Hi again

The site is live and I’m wondering how I get the mobile version to show the mobile menu button on the left, and my image as a mobile menu item.

If you visit the site, I want the image you see in the menu when scrolling at the same place when you’re scrolling on mobile.

I’m displaying the logo in the menu with the following css, and it’s working great on everything except mobile:

/* —————————————————————————-
Custom CSS
*/
.menu-item-40484 {
display: none;
}
.affix .menu-item-40484 {
display: block;
}
.menu-item-40484 {
position: absolute; left: 260px;}
}
/* responsive portrait tablet */

@media (min-width: 768px) and (max-width: 1018px) {
.menu-item-40484 {position: absolute;left: 35px;}
}
/* responsive landscape tablet */

@media (min-width: 1019px) and (max-width: 1199px) {
.menu-item-40484 {position: absolute;left: 52px;}
}

@media (min-width: 1019px) and (max-width: 1199px) {
.td-menu-wrap #td-top-menu {
padding-left: 70px;
}

I’ve tried adding something like the css below, but it doesn’t work:

/* responsive phone */

@media (max-width: 767px) {
.menu-item-40484 {position: absolute;left: 5px;}
}

My site: http://www.amerikanskpolitikk.no

I would appreciate the CSS to make the menu smaller too!

Maybe an update in the future could include a design where the ipad version automatically goes to mobile or the design of the menu looks good when forced onto two lines? Many thanks.

Hi,

The code is not working yet. Between, can I have the CSS codes for footer & comments as well?
Please see the image below:
Author Name, Author Description, Next, Previous, Next Title, Previous Title

Comment Box: Commentator Name, Commentator Email, Commentator Website, Comment Content

Footer Left (copyrights) & right:

Thanks.

@Christopher Have I done this right? My performance grade is now only 78/100

This is my htaccess code below:

# BEGIN WordPress

AddType text/javascript .js

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 5 seconds”
ExpiresByType image/x-icon “access plus 2500000 seconds”
ExpiresByType image/jpeg “access plus 2500000 seconds”
ExpiresByType image/png “access plus 2500000 seconds”
ExpiresByType image/gif “access plus 2500000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2500000 seconds”
ExpiresByType text/css “access plus 700000 seconds”
ExpiresByType text/javascript “access plus 700000 seconds”
ExpiresByType application/javascript “access plus 700000 seconds”
ExpiresByType application/x-javascript “access plus 700000 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
</IfModule>

<IfModule mod_headers.c>
Header unset ETag
</IfModule>
<IfModule mod_alias.c>
RedirectMatch 403 /xmlrpc.php
</IfModule>
# END WordPress

• This reply was modified 12 years by ToniLaird.

Thank you!
Could you please provide me with the CSS code to get this result? I guess that I must reduce the padding + change font height.
And I have no idea how to hide the Home icon on iPad. Could you please help me with it?

hi,

we cannot put everywhere the font options, but thanks for the suggestion.

try to use css to change the font family of next and prev article:

.prev-post a, .next-post a {
  font-family:Verdana, "Times New Roman",Georgia,Serif !important;
  font-size: 20px !important;
}

here:http://screencast.com/t/qBzdjukSWd

Thanks for you message.
Radu A.

Could you please show me how? I have to find the code in the style.css file, I guess, but I’m not an expert…

Thanks,

Mario

Solved it thanks.

If anyone needs to know, I did it like this:

Insert this code in Custom CSS and the theme panel.

.td-social-wrap .td_mod_wrap {
margin-bottom: 1px;
text-align: left;
line-height: 11px;
}

hi,
it doesn’t work just adding random codes in the theme.

and if you take a look a the read more button is made so it start always on a new line.
what you need is to modify it from css.

if you are not a programmer please hire one for this task.

Thanks for you message.
Radu A.

hi,
that arrow is from element.png sprite image (images/sprite/elements.png) , so to change the color of the arrow you need to change the arrow images in the elements.png.

to make the arrow appear all the time use this css:

.iosSlider .prevButton,  .iosSlider .nextButton{
   opacity: 100; 
}

here: http://screencast.com/t/Mr1D43Fi

Thanks for you message.
Radu A.

Hi Radu,

whne I use the WordPress native blockquote function, I would like to get by default the same style as the tagdiv shortcode [quote_box_center]. I have to change the style.css, I guess…

Thanks,

Mario

hi,

use this css to center your add:

.td-g-rec-id-custom_ad_2 {
  text-align: center;
}

or

.td-g-rec-id-custom_ad_2 {
 position: relative;
 left: 20px;
}

i have added the code here: http://screencast.com/t/ANWUFc8vi

Thanks for you message.
Radu A.

hi,
you have added a widget there:
http://screencast.com/t/1LuhZZRTvkK

use this css to make it white:

.widget_rss span .rsswidget {
  color: #ffffff;
}

here: http://screencast.com/t/vptKI9yF

Thanks for you message.
Radu A.

Ok, I find the solution adding a CSS code that I’ve founded in forum. But now, the page is unstructured. The “Read more” button has unstructured the footer. I just want the “read more” button on the “latest articles” section. Here you can see a picture of what happens.

http://i58.tinypic.com/xd89vs.jpg
http://i61.tinypic.com/i4k5nb.jpg

How can I fix it?

Thanks