Jump to content

Demonolith

Privileged
  • Content count

    304
  • Joined

  • Last visited

About Demonolith

  • Rank
    Privileged

Users Experience

  • Experience
    Nothing
  • Area of Expertise
    Designer
  1. Search entire site for CSS rule

    Thanks fisicx
  2. Hi all, I have a CSS rule that I wish to change the margins of, but I can't be sure where else on the site I've used the CSS rule and how it would impact other pages. Is there a way that I can search the entire Wordpress site for pages where the CSS rule is used?
  3. Tables for Lightbox

    Thanks Nillervision, is this more suitable? <div class="gallery-wrapper"> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </div> <!-- gallery-wrapper -->
  4. Tables for Lightbox

    In my quest for a more responsive website I've found that placing my Lightbox image gallery in a table works well - I'm wondering though, based on how I'm using the code it will come back to bite my in the proverbial later down the line. Here's a page with 2 galleries .table { display: table; width: 100%; } table.lightbox-table td { text-align: center; margin: 0 auto; padding: 0; } .table-row { display: table-row; width: 100%; } .table-cell { display: table-cell; width: fit-content; border: solid 6px #575974; margin: 0; padding: 0; } .table-cell:hover { border: solid 6px #6f73a9; } @media screen and (min-width: 1200px) { .table, .table-row { display: block; margin: 15px 0; } .table-cell { display:inline-block; width: fit-content; } } @media screen and (max-width: 1200px) { .table, .table-row { display: block; margin: 15px 0; } .table-cell { display:inline-block; width: fit-content; } } @media screen and (max-width: 640px) { .table, .table-row { display: block; } .table-cell { display:inline-block; width: 32%; } } @media screen and (max-width: 400px) { .table, .table-row { display: block; } .table-cell { display:inline-block; width: 48%; } } <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'> <table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-1.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-2.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-3.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-3.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-4.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-5.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-5.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-6.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-6.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-7.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-7.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-8.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-8.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-9.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-9.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-10.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-10.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-11.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-11.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-12.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-12.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-13.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-13.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-14.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-14.jpg" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </tr></table> </div> <!-- gallery-1 --> <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'> <table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </tr></table> </div> <!-- gallery-1 --> Are tables OK to use in the way I am or is there a better alternative? Cheers, Niall
  5. Keep hover colour after tap on phones

    Thanks guys, I'm going to leave the map for now and come back to it at a later date. Right now I'll concentrate on making the site responsive (firstly on mobile, then on tablets) and figure out why my pages are loading so slowly (I imagine unused Javascript and 50+ plugins would be a factor - making the site properly responsive will negate a few plugins anyhoo). I'll keep this thread marked as unsolved as I'll likely return to it.
  6. Keep hover colour after tap on phones

    In all honesty, I'm not sure how important the map would be to parishioners. Around 10 years ago I offered to do a website for my parish and it has gradually been growing in size since. The site was originally created using tables and is a mess - to my shame that version is still live. One day I decided to redesign the whole site using CSS, this to me was a large undertaking but I wanted to teach myself CSS and stay ahead of the curve. Once I had done that Google announced that the search results would be based on how mobile-friendly sites were. I then added a mobile theme I customised to suit my own aesthetic, once that was done I realised responsive was the way to go and that's where I'm at now! I took this redesign on by myself without being asked to (the site is voluntary so no payment is exchanged), but I'm taking it as an opportunity to better myself in the field. The map is on the old site using Flash (eurgh) and I wanted to see if I could update it to include the same functionality.
  7. Keep hover colour after tap on phones

    Really sorry guys, but your suggestions are going over my head in terms of getting them to work. I like the idea of using focus to highlight only one region while leaving the others gray (however, if that would mean the map would initially be all gray I wouldn't be keen) - I thought focus only worked on input types? Should the desktop version of the map be scrapped altogether because it is a fixed width and height and therefore not responsive for different screen sizes? In terms of the amount of content, I would prefer to keep the hovering method as putting all townlands, translations and description up at once would be both confusing to read to the average user and cramped. I found these 2 Codepens in search of ideas... not sure how relevant they are. One Two I appreciate all the help!
  8. Keep hover colour after tap on phones

    Thanks fisicx. I had originally done the map using raphael.js and got it functioning as I intended with a hover effect that would bring up a few lines of text on each region, but I couldn't figure out a way to resize it and have it work responsively on all screens. Is there a way to do so? If there is then it would solve my issue. If you open this page and view it on any screen over 640px you'll see the original (almost) fully functional map. For each region I have the name of the townland along with the Irish translation and a descriptive line or 2 - I feel this would be too much content to put below the map (I currently just have the region names along with the corresponding colours via an SVG background).
  9. Keep hover colour after tap on phones

    Thanks Fuzzy Logic. I amended the code to what you see below, but I can only get it to work with one region - with multiple classes it mixes up the colors. jQuery('path').click(function(){ jQuery(this).toggleClass('tievenameena tievebrack brackaghnorth'); }); <!-- Brackagh North --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="110px" viewBox="0 130 420 60" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="brackaghnorth" fill="#ff0000" stroke="#000000" stroke-width="1" transform="translate(0,45)" d="M 360.25 72.1 Q 341.75 75.4 338.4 73.6 L 319.8 83.35 319.8 83.4 Q 321.55 86.6 323.5 89.8 325.2 92.7 326.9 95.45 328.6 98.3 330.15 101.3 331.85 104.35 332.95 107.1 334.1 109.85 334.65 111.4 335.25 112.85 336.5 115 337.85 117.15 339.15 120.1 339.95 122.05 341.6 124.3 342.9 126.1 342.5 127.55 342.05 128.95 342.05 130.7 342 132.4 342 133.9 341.95 135.4 339.8 136.2 337.55 137.05 336.4 135.95 L 351.35 163.1 Q 375.1 150.5 398.15 142.05 398.2 139.55 398.6 136.25 399.15 132.9 399.85 129.3 400.65 125.8 400.35 122.3 406.5 107 405.75 92.7 L 398.2 69.1 388.4 68 370.6 75.9 360.25 72.1 Z"></path> </svg> <!-- Tievebrack --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="120px" viewBox="0 130 420 70" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="tievebrack" fill="#ffff00" stroke="#000000" stroke-width="1" transform="translate(264,128)" d="M 69.95 23.7 Q 68.85 20.95 67.15 17.9 65.6 14.9 63.9 12.05 62.2 9.3 60.5 6.4 58.55 3.2 56.8 0 L 56.55 0 48.65 4.1 46.1 11.2 Q 33.6 21 28.95 24.8 26.1 27 22.25 28.75 20.35 29.45 16.95 32.75 13.35 36.1 11.1 37.4 8.75 38.65 2.65 44.25 1.25 45.35 0 46.5 6.05 52.3 7.95 54.1 9.65 55.8 13.7 59.2 17.75 62.6 20.55 66.15 23.4 69.7 24.4 71 25.35 72.3 26.3 73.85 27.1 75.4 29.6 77.6 32.1 79.85 33.35 81.1 34 81.8 34.95 82.65 37.05 84.85 40.45 87.9 L 49.15 88.7 50 88.2 75 86.65 Q 83.65 85.4 88.35 79.7 L 73.4 52.55 Q 74.55 53.65 76.8 52.8 78.95 52 79 50.5 79 49 79.05 47.3 79.05 45.55 79.5 44.15 79.9 42.7 78.6 40.9 76.95 38.65 76.15 36.7 74.85 33.75 73.5 31.6 72.25 29.45 71.65 28 71.1 26.45 69.95 23.7 Z"/></path> </svg> <!-- Tievenameena --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="165px" viewBox="0 130 418 116" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="tievenameena" fill="#0000ff" stroke="#000000" stroke-width="1" transform="translate(0,45)" d="M 237.9 160.3 Q 238.3 161 239.1 162.15 239.85 163.25 240.6 164.25 241.25 165.4 241.9 166.4 242.45 167.4 244.95 170.65 247.35 173.95 249.55 178.75 251.75 183.4 252.6 184.4 253.4 185.45 254.5 186.35 255.6 187.3 259.35 190.9 259.2 191.6 259.7 192.7 261 194.85 260.55 195.25 259.95 195.85 259.45 195.95 258.9 195.95 259.3 196.75 259.65 197.5 260.9 200 262.1 202.45 263.75 205.25 265.3 208.1 266.35 210.65 267.35 213.1 267.85 213.25 268.5 212.9 269.9 212.3 271.15 211.75 271.85 211.35 275.8 209.25 278.5 207.65 281.2 205.95 283.7 202.75 286.3 199.4 288.15 195.8 289.9 192.25 291.25 190.45 292.5 188.6 293.65 187.35 L 302.2 178 312.15 172.1 303.45 171.3 Q 300.05 168.25 297.95 166.05 297 165.2 296.35 164.5 295.1 163.25 292.6 161 290.1 158.8 289.3 157.25 288.35 155.7 287.4 154.4 286.4 153.1 283.55 149.55 280.75 146 276.7 142.6 272.65 139.2 270.95 137.5 269.05 135.7 263 129.9 258.15 133.95 253.4 136.8 251.6 138.35 250.05 139.8 248.55 141.2 240.3 145.65 234.15 148.95 231.75 149.6 232.8 152.15 233.75 153.9 234.65 155.7 235.45 156.7 236.15 157.8 236.8 158.65 237.45 159.55 237.9 160.3 Z"></path> </svg> .brackaghnorth { fill: #ff8080; } .tievebrack { fill: #ffff80; } .tievenameena { fill: #8080ff; } Intended Results Region 1 #ff8080 to #ff0000 Region 2 #ffff80 to #ffff00 Region 3 #8080ff to #00ffff Actual Results Region 1 #ff8080 to #8080ff Region 2 #ffff80 to #8080ff Region 3 #8080ff to #ffff80
  10. Keep hover colour after tap on phones

    I tried the following, but it doesn't seem to work - it's for the uppermost region. a svg:hover #brackaghnorth { fill: #ff0000; pointer-events: none;} a svg:active #brackaghnorth { fill: #ff0000; pointer-events: none;}
  11. Keep hover colour after tap on phones

    Hi all, I have an SVG map and would like to have it so that when on a phone if a user taps a region the colour will change and remain that colour until another colour e.g. Region begins as #ff0000 When tapped changes to #ffff00 Stays that colour until another region is tapped Here is the map (towards the bottom of the page) - excuse how it looks on screens larger than 640px, right now I'm focusing on phones. And here's my CSS: a svg:focus #brackaghnorth { fill: #ff0000; pointer-events: none; } a svg:hover #tievebrack { fill: #ffff00; pointer-events: none; } a svg:hover #tievenameena { fill: #0000ff; pointer-events: none; } a svg:hover #liggins { fill: #ff3366; pointer-events: none; } a svg:hover #ligatraght { fill: #009900; pointer-events: none; } a svg:hover #keerin { fill: #ff00ff; pointer-events: none; } a svg:hover #oaghmonicrory { fill: #ff9900; pointer-events: none; } a svg:hover #teebaneeast { fill: #9933cc; pointer-events: none; } a svg:hover #carnanransy { fill: #ccff00; pointer-events: none; } a svg:hover #crouck { fill: #0033cc; pointer-events: none; } a svg:hover #alwories { fill: #00ffff; pointer-events: none; } a svg:hover #monanameal { fill: #cc0000; pointer-events: none; } a svg:hover #aghascrebagh { fill: #ccffff; pointer-events: none; } a svg:hover #crockanboy { fill: #ff9900; pointer-events: none; } a svg:hover #sheskinshule { fill: #ffff99; pointer-events: none; } a svg:hover #formil { fill: #33ff00; pointer-events: none; } a svg:hover #binnafreaghan { fill: #cc0000; pointer-events: none; } a svg:hover #cashel { fill: #9966ff; } a svg:hover #backan { fill: #00ff00; } a svg:hover #brackaghsouth { fill: #ffff00; } a svg:hover #leaghan { fill: #00ffff; } a svg #brackaghnorth, a svg #tievebrack, a svg #tievenameena, a svg #liggins, a svg #ligatraght, a svg #keerin, a svg #oaghmonicrory, a svg #teebaneeast, a svg #carnanransy, a svg #crouck, a svg #alwories, a svg #monanameal, a svg #aghascrebagh, a svg #crockanboy, a svg #sheskinshule, a svg #formil, a svg #binnafreaghan, a svg #cashel, a svg #backan, a svg #brackaghsouth, a svg #leaghan { transition: 200ms; transition-timing-function: ease-in-out; -webkit-transition: 200ms; -webkit-transition-timing-function: ease-in-out; }
  12. I only have a couple of instances where I feel the text should change so I'll try out TimW's method, thanks.
  13. Didn't realise that. I have other cases where I'd like the wording to change, for instance
  14. I've put that together, but it's not working for me (the div is empty) <a href="images/index/census2010.pdf" target="_blank"> <div class="welcome"> <div class="welcomenewparishioners"> <div class="registercensus"></div> </div> </div><!-- welcome --></a> .registercensus { font-size: 22px; letter-spacing: 3px; content: "Click here to register by filling out a parish census form"; } .registercensus { text-align: center; font-size: 7vw; line-height: 7vw; content:"Tap here to download a copy of the parish census form"; }
  15. Is there a way to change a word in a line of text depending on the screen size? On desktop I'd like the line: but on phones and tablets I'd like
×