Jump to content
sheilahoff

[Solved] CSS help for rounded corner images & custom fonts

Recommended Posts

sheilahoff

I made this site for a client several years ago. It's live at http://coachmediaconsult.com. it's in DMS 1.1.9.1. We're revamping it and leaving it in that version!.

I have two CSS things I'm struggling to resolve. Dev site is at  http://cmc.hoffmangraphics.com

1) we want to make all the images have round corners. I found a tutorial that says to use this CSS but it's not impacting the photos, even when I add !important.
img {border:1px solid #FFF;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; }

As you can see in the attached image from Contact page I can make the border-radius work in Inspect Elements when I use the selector body .pl-content img. But I can't make that work in my CSS. I have caching disabled. I can't figure out why.

2) I've installed a commercial font which you can see at the top of the About page. But I also have it set to display the quotes on the top of pages like the co-parent page and it's not displaying the Segoe font, rather whatever cursive is available. I can't figure out why. I'm using font-family: 'Segoe Script', cursive;

Thanks for any help.

Sheila

Capture.JPG

Edited by sheilahoff (see edit history)

Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

I finally got these things to stick now I can't get a simple line of CSS to stick. I've read pages of tips on this issue but not one of them has worked. I'm going nuts.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
webmktco

Hi Sheila,

Not sure I understand. Are you just trying to round the corners on images? It looks like you've achieved that from looking at the site. Are you trying to add a frame around the image (ie img-polaroid)?

As for the Segoe Script font, I'm looking at the source code on the ABOUT page and I noticed discrepancies in naming the font:

Line 174: 

<link id='master_font_import' rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900|'SegoeScript' 'SegoeScript-Bold''>

Line 329: 

<style type="text/css" id="pagelines-custom">
 @font-face{font-family:'Segoe';src:url('http://cmc.hoffmangraphics.com/webfonts/29CB79_01_0.SVG') format('svg');font-weight:normal;font-style:normal} .section-business-branding .bb-business-logo{float:left;margin-left:0 !important;margin-top:-60px !important;max-width:100%;vertical-align:top} body .pl-mobile-menu .mm-holder{background:#2d85be !important;width:200px;border-top:none} .gform_wrapper .gform_footer{clear:both;margin:0 !important;padding:0 !important} .widget .gform_wrapper .gform_heading{margin-bottom:0 !important} body .gform_widget .gform_wrapper .gfield_label{display:none} #site .crackbar .nav-collapse{background:#2B85C0;margin-bottom:30px} .section-crackbar .crackbar .navline > li > a{padding:9px} .crackbar.pl-color-user{background-image:none !important;background-color:transparent !important} .crackbar.pl-color-user .navline > li > a{text-shadow:none} .crackbar{box-shadow:none !important;color:transparent !important} .crackbar.pl-color-user .dropdown-menu .active > a,.crackbar.pl-color-user .navline > li.dropdown.open > a,.crackbar.pl-color-user .navline .current_page_item > a,.crackbar.pl-color-user .navline .current-menu-item > a{background-color:transparent !important;color:#2d85be !important} .crackbar.pl-color-user .navline > li > a:hover{color:#2d85be !important} .custom-nav > li > a{padding:30px 9px 9px !important} .custom-nav > li > a:hover{padding:30px 9px 9px !important} .dropdown-menu li > a:hover,.dropdown-menu li > a:focus,.dropdown-submenu:hover > a,.dropdown-menu li.current-menu-item > a{background-color:#2d85be !important;color:white !important;background-image:none;text-shadow:none} .dropdown-menu li a{color:#964C1D !important} .selettore-custom{padding-left:20px} .section-selettore-tabs .tabs-container{width:95%} .selettore-custom [class^="icon-"]:before,[class*=" icon-"]:before{display:none} .section-highlight .highlight-head{font-size:30px !important;margin:0;padding:0;font-family:'Raleway',sans-serif} #rotating-images-rotator-wrapper_1,#rotating-images-rotator-wrapper_2,#rotating-images-rotator-wrapper_3{float:right} #rotating-images-rotator-wrapper_1 img,#rotating-images-rotator-wrapper_2 img,#rotating-images-rotator-wrapper_3 img{border-radius:20px} .post-meta{margin-bottom:0} .fpost .post-excerpt{margin:0} .wp-caption img{padding:0} .media > .bd{font-size:15px} body.display-boxed .boxed-wrap{background:none repeat scroll 0 0 rgba(0,0,0,0);margin:0 auto;max-width:1014px;position:relative} #dynamic-content{background:#ffffff;border-radius:20px} body.display-boxed .boxed-wrap .pl-area-wrap > .pl-content{padding-left:30px;padding-right:30px} blockquote{font-size:16px;font-family:'Raleway',sans-serif !important;font-weight:bold;color:#2C85BF;border-left:0;margin:15px 30px 20px 30px} blockquote p{font-size:16px;font-family:'Raleway',sans-serif !important;font-weight:bold;color:#2C85BF;border-left:0;margin:15px 30px 20px 30px} ul.unstyled,ol.unstyled{margin-bottom:0} blockquote small,blockquote cite{padding-left:50px !important} blockquote p{font-style:normal;font-family:'Segoe Script',cursive} .widget ul li{padding:0} img{border-radius:20px} body .pl-content img{border-radius:20px} .hentry ul,.hentry ol{font-size:15px;line-height:23.25px;padding-left:20px;margin-top:0px} .widget .widget-title,.widget .widgettitle{font-family:'Segoe Script',cursive;font-weight:bold;font-size:1.25em;margin-bottom:0;color:#2C85BF} .widget .textwidget{font-size:15px;padding:0} .widget ul li a:hover{text-decoration:none} a:hover{color:#2C85BF} .hentry a:hover{text-decoration:none} .btn-info{background-color:#007fb0 !important;background-image:-moz-linear-gradient(center top,#007fb0,#18acda)} .btn-small{font-size:16px !important;font-weight:bold !important} p{margin:0 0 1.5em 0;font-size:15px} .resource-links a{font-size:15px} .hentry table th,.hentry table td,#comments table th,#comments table td{font-size:15px} .hentry h1,.hentry h2{margin:0} .post-nav,.current_posts_info{background-color:#FFFFFF} h1,.entry-title,.entry-title a{color:#2C85BF;font-size:1.5em} .fpost .entry-title{font-size:1.5em} .fpost .post-title h2 a:hover{text-decoration:none;color:#426EA9} .hentry h1,.hentry h2 .hentry h3{margin:0} h2,.entry-title,.entry-title a{color:#BA7E62;font-size:1.25em;padding-bottom:.75em} h3,.entry-title,.entry-title a{color:#846036;font-size:1.25em;margin-top:.600em;line-height:1.75em} h4{color:#2C85BF;font-family:'Segoe Script',cursive;margin:0 0 .25em 0 !important;font-size:1.25em} h5,.entry-title,.entry-title a{color:#2C85BF;font-size:1em;margin-top:.600em} h6{font-size:14px;font-family:'Segoe Script',cursive;font-style:normal;color:#2C85BF;margin:0;padding:0} .boomboard h2.hugetext{margin:0} .boomboard{min-height:250px;padding:70px;text-align:center} .footer-extras{color:#FFFFFF;margin:15px 0;padding-bottom:20px} .footer-extras a{color:#FFFFFF} .footer-extras a:hover{color:#91534E} 
</style>

======

OR- it could be that you didn't upload the custom fonts properly? I see on http://cmc.hoffmangraphics.com/webfonts/svg_test.html that the font isn't working either. I've never used a custom font via .svg format... can you try .ttf or .otf?

Share this post


Link to post
Share on other sites
sheilahoff

I appreciate you taking time to look. I resolved the rounded corners and client ended up changing the quotes from Segoe so I'm good now. And I finally gave up trying to save CSS in DMS and have installed something that puts my custom CSS last and so it's always accept after DMS does its thing. I think that the font thing is screwy due to the staging site location and not all the fonts getting brought over.

If I could mark this thread SOLVED I would but the "new" forums don't allow that the way the old ones did.

Thanks and have a great weekend.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Simon

This topic has been marked as solved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×