Search the Community

When linking a telephone number on your website using the a href tag you will notice inconstant styles from mobile devices. For example on a desktop or laptop the number will appear styled as expected when using this code. <a href="tel:+1-555-555-5555">1-555-555-5555</a> Then you take a look from your mobile device and they show a blue style color. The CSS seems to have been overwritten somehow. The mobile phone browser is adding it’s own style. To remove it across the board you can set the format-detection meta tag in the header of your web page. To remove all auto-formatting for telephone numbers, add this to the head of your html document: <meta name="format-detection" content="telephone=no"> If setting the meta tag isn’t an option you can always use some advanced CSS code. Here we’ll target the style value of the link/anchor tags. a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } If you want a class so not all phone numbers are effected you can do so like this. a[x-apple-data-detectors].class-name { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } Lastly you can also target all a href elements that start with “tel” like this. a[href^="tel"] { color: inherit; text-decoration: none; }

Today I was on the forum and wanted to add in a link to our GitHub and GitLab accounts next to the social icons. We use a theme from IPS Focus created by Ehren for IP.Board are by far the best out there. Out of the box they include all of the mainstream social icons for inclusion, but not GitHub or GitLab. The good news is the theme library is pulling these from FontAwesome so we just need to add a little CSS. Jump into your custom.css file, make sure you go into custom.css as then you’re CSS will not be overwritten during theme upgrades. Here’s the code I dropped in for GitHub and GitLab. You can set the background color to whatever you like, the gradient I’d leave as it’s the effect you see when hovering any of your social icons. Just update the name of the element from “sGitLab” to whatever you like in the three lines of code. Below I’ve added 2, one for GitHub and one for GitLab. a.ipsfocus_sGitlab:before{ content: "\f296"; } .ipsfocus_social .ipsfocus_sGitlab{ background: #fd7e14; } .focus-social-gradient .ipsfocus_sGitlab{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); } a.ipsfocus_sGithub:before{ content: "\f09b"; } .ipsfocus_social .ipsfocus_sGithub{ background: #495057; } .focus-social-gradient .ipsfocus_sGithub{ background-image: linear-gradient(to bottom, #4c71b0 0%, #304c87 100%); } You can get the unicode for the content element from the FontAwesome website itself when you click into an icon. Now your CSS is ready, time to add it to the social icons html of the theme. Jump back to your list of themes and click the edit button this time, then click the “Social Icons” tab. In here you can drop in your HTML following the syntax I’ll paste below. Make sure to use your new class name, mine are sGitLab and sGitHub. <li><a href="https://www.facebook.com/prodjexapp" class="ipsfocus_sFacebook" target="_blank">Facebook</a></li> <li><a href="https://twitter.com/ProdjexApp" class="ipsfocus_sTwitter" target="_blank">Twitter</a></li> <li><a href="https://www.linkedin.com/company/25049182/" class="ipsfocus_sLinkedin" target="_blank">LinkedIn</a></li> <li><a href="https://github.com/nrileykc" class="ipsfocus_sGithub" target="_blank">Github</a></li> <li><a href="https://gitlab.com/gallitin" class="ipsfocus_sGitlab" target="_blank">GitLab</a></li> That’s it you’re all set just save and reload your site to see the changes. You can see our's here on the boards in the header and footer. View the how to article on our web development blog.

Hi all, This may sound like a simple question and I agree with many themes I have used it has been but for some reason with my current theme I am finding it very difficult to change. My site is www.bengrovemarketgarden.co.uk and try as I might the home page will only display the featured image of posts and the title. It would rather it displayed the most recent post at the top and the rest below but the full posts or at the very least, a large snippet. The theme is sixteen, does anyone have any advice?

My site: http://automatedshowings.com/dashboard/home.php As I shrink the window the nav bar converts to the mobile version. If I pull it up on my iPhone the page looks like the desktop version and the mobile nav is not there.

So I'm extremely new to jquery/javascript. I know other languages, but for some reason I just cannot seem to wrap my head around javascript. It's finally starting to get easier so I used it a bunch on one of my new pages. Turns out the hidden divs I was hiding would show for a split second during the page load. When you have a bunch on one page this looks bad. Figured out I needed them hidden by default, not after the page loaded. My fix was to use css to not display the div until clicked. To do this add the following css to the div: display: none;

I was looking into how to give some text a glowing effect earlier this morning so figured I would share. <span style="color:red; text-shadow: 0 0 10px #c61a1a;"><b>TEXT GOES HERE</b></span> The above code will generate: This post has been promoted to an article

On one of my projects I was trying to figure out how to center my footer div. It was after all the content, but I wanted to center it with the width of the center content and not overlap the sidebars. Took me quite a while to figure it out so here it is: .footer{ position:fixed; bottom:0; left:50%; margin-left:-200px; /*negative half the width */ background:red; width:400px; height:100px; z-index:999; }

So I'm having some problems here. http://Digitize Design.net/pm/ Username: nathan Password: test123 As you can see the project boxes fall under each other. I need them to go 3 accross then have a line break and continue that way for as many projects as there are. Any suggestions?

I'm going to be needing one of these for a project I'm working on. What's your favorite? I just found this one: http://www.catswhoco...s3-progress-bar It's nice, but I'm looking for something a little simpler.