• Web Development

    Easy way to add an image or title next to logo using css in WordPress

    This can be done for WordPress, Magento, Prestashop or other CMS that don’t have an existing similar feature. Using ::after or ::before element in CSS allows you to insert content onto a page without it needing to be in the HTML. For example,   Adding an image on the right from the logo: .logoclass::after { content:url(“/url/path.png”); }        2. Adding some text on the left from the logo: .logoclass::before { content:”text string”; }    

  • Web Development

    Media queries breakpoints

    Responsive web design – making web pages render on a variety of devices. More information: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

  • Web Development

    CSS Flexible Box Layout

    CSS Flexible Box Layout, commonly known as Flexbox, is a CSS3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. Example: https://codepen.io/jonasschmedtmann/pen/LXydvq

  • Digital Tools,  Web Development

    Cutting images or making complex shapes using CSS

    CSS Clip Path Maker is a tool allowing you to make complex shapes using CSS clip-path property by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points. Example: div.classname {clip-path: inset(0 15% 1% 35%);position: relative;left: -150px;top: 30px;} For more information: https://www.bennettfeely.com/clippy/

  • Web Development

    Umbraco richtext editor removing tag for font-awesome

    HTML <p><a href=”https://”> <span class=”fa fa-facebook” style=”color: white;”> </span></a> </p> CSS footer { background: #061D25; padding: 10px 0; text-align: center; } footer a { color: #70726F; font-size: 20px; padding: 10px; border-right: 1px solid #70726F; transition: all .5s ease; } footer a:first-child { border-left: 1px solid #70726F; } footer a:hover { color: white; } For more information: https://stackoverflow.com/questions/33517524/how-to-add-the-footer-with-social-icons-in-bootstrap https://our.umbraco.com/forum/using-umbraco-and-getting-started/80640-richtext-editor-removing-i-tag-for-font-awesome

  • Web Development

    How to show text on image when hovering?

    Show a description when hovering over an image. Wrap the image and the “appear on hover” description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div. This post worked for me. https://stackoverflow.com/questions/26343556/move-text-up-over-image-on-hover