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”; }
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/
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
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/
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
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
