muddywolf   10 #1 Posted August 19, 2017 Hello, I like the layout of this BBC article, I have seen it used on various BBC magazine articles but can someone tell me what such a format is called (the changing images as you scroll down are a feature I particularity like, some stay static while others scroll).  Now the real question, is there a wordpress theme that has such a feature?   http://www.bbc.co.uk/news/resources/idt-sh/premier_league_25_2002_2007 Thanks Share this post Link to post Share on other sites Share this content via...
apelike   10 #2 Posted August 19, 2017 Looks like a lot of java script. Not sure what browser you are using but if its Chrome then right-click on the page and then view source. That way you will be able to see the code, copy or print it out. As for wordpress, I doubt you will get something this complex. Share this post Link to post Share on other sites Share this content via...
swarfendor437 Â Â 14 #3 Posted August 20, 2017 Most good browsers like Firefox and Opera have some form of 'Inspect Web Element' which would give you some idea of the code being used for each piece: Â .p_padlock:focus,.p_padlock:hover,.focusEnabled .p_padlock_unlocked:focus,.p_padlock_unlocked:hover{background-color:#ff4739;}.p_paragraph,.p_playerControlBarHolder{-webkit-text-size-adjust:none;}@-moz-document url-prefix(){.p_audioIcon,.p_muteIcon,.p_fullscreen-enterIcon{position:absolute;top:0;width:44px;height:44px;}.p_audioIcon{left:1px;}.p_muteIcon{left:1px;}.p_fullscreen-enterIcon{left:0;top:0;}.svg .p_cta .p_ctaIcon{left:9px;}.svg .p_padlock .p_padlock-lockedIcon{width:30px;height:30px;}.svg .p_padlock .p_padlock-unlockedIcon{width:30px;height:30px;}.p_play-iplayerIcon{width:44px;height:44px;top:2px;}.p_closed-captionsIcon{width:44px;height:44px;top:-1px;}.minimode.svg .p_cta .p_ctaIcon{left:9px;}.svg .p_embedButton .p_embedIcon{left:2px;top:2px;}}.p_warning.p_guidance.p_continous .p_guidanceIcon,.p_ctaGuidance.p_guidance.p_warningCta .p_guidanceIcon{fill:#FFFFFF;color:black;}.p_warning.p_guidance.p_continous{background-color:rgba(51,51,51,0.85);}.p_warning.p_guidance.p_continous .guidanceClose{background-color:#404040;}.p_warning .p_guidanceFallback,.p_warningCta .p_guidanceFallback{background-color:#FFFFFF;color:black;}@media only screen and (orientation:portrait) and (height:628px) and (-webkit-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:2),only screen and (orientation:portrait) and (height:696px),only screen and (orientation:portrait) and (height:528px){.fullscreen.ios10 .p_playerControls{padding-bottom:65px;}.fullscreen.ios10 .p_timeTip{bottom:153px;}}@media (max-width:365px){:not(.nofullscreen).chromecast.subtitles.embed .p_timeDisplay,:not(.nofullscreen).picInPic.subtitles.embed .p_timeDisplay{visibility:hidden;}}@media (max-width:264px){:not(.nofullscreen).chromecast.subtitles.embed .p_embedButton,:not(.nofullscreen).picInPic.subtitles.embed .p_embedButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).chromecast.subtitles.embed .p_chromecastButton,:not(.nofullscreen).picInPic.subtitles.embed .p_picInPicButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).chromecast.subtitles.embed .p_subtitleButton,:not(.nofullscreen).picInPic.subtitles.embed .p_subtitleButton{visibility:hidden;}}@media (max-width:323px){:not(.nofullscreen).chromecast.embed .p_timeDisplay,:not(.nofullscreen).picInPic.embed .p_timeDisplay,:not(.nofullscreen).subtitles.embed .p_timeDisplay,:not(.nofullscreen).subtitles.chromecast .p_timeDisplay,:not(.nofullscreen).subtitles.picInPic .p_timeDisplay{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).picInPic.embed .p_embedButton,:not(.nofullscreen).chromecast.embed .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).picInPic.embed .p_picInPicButton,:not(.nofullscreen).chromecast.embed .p_chromecastButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).subtitles.embed .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles.embed .p_subtitleButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).subtitles.chromecast .p_chromecastButton,:not(.nofullscreen).subtitles.picInpic .p_picInPicButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles.chromecast .p_subtitleButton,:not(.nofullscreen).subtitles.picInPic .p_subtitleButton{visibility:hidden;}}@media (max-width:277px){:not(.nofullscreen).embed .p_timeDisplay,:not(.nofullscreen).subtitles .p_timeDisplay,:not(.nofullscreen).chromecast .p_timeDisplay,:not(.nofullscreen).picInPic .p_timeDisplay{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen) .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles .p_subtitleButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).chromecast .p_chromecastButton,:not(.nofullscreen).picInpic .p_picInPicButton{visibility:hidden;}}@media (max-width:232px){:not(.nofullscreen) .p_timeDisplay{visibility:hidden;}}@media (max-width:320px){.nofullscreen.chromecast.embed.subtitles .p_timeDisplay,.nofullscreen.picInPic.embed.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:220px){.nofullscreen.chromecast.subtitles .p_embedButton,.nofullscreen.picInPic.subtitles .p_embedButton{visibility:hidden;}}@media (max-width:176px){.nofullscreen.chromecast.subtitles .p_chromecastButton,.nofullscreen.picInPic.subtitles .p_picInPicButton{visibility:hidden;}}@media (max-width:276px){.minimode.embed.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:232px){.minimode.embed .p_timeDisplay,.minimode.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:188px){.minimode .p_timeDisplay,.nofullscreen .p_timeDisplay{visibility:hidden;}}#p_threeSixtyCanvas{position:absolute;top:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none;}.threeSixty .p_accessibleHitArea{display:none;}.threeSixty.cta .p_accessibleHitArea{display:block;}#p_compassContainer{width:134px;height:134px;position:absolute;top:0;left:0;background:transparent;border:0;padding:0;margin:0;outline:none;}@media (max-width:500px){#p_compassContainer{display:none;}} </style> Â And that is just the style element! Â This is only a part of it due to forum character limit restrictions!!! Share this post Link to post Share on other sites Share this content via...
alchresearch   214 #4 Posted August 21, 2017 Here you go:  https://shorthand.com/ Share this post Link to post Share on other sites Share this content via...
muddywolf   10 #5 Posted August 22, 2017 Thank you guys, yes editing source code looks way beyond me however that link alchresearch looks promising. Share this post Link to post Share on other sites Share this content via...
muddywolf   10 #6 Posted November 22, 2017 Here you go: https://shorthand.com/   Guess how much? I put a site together using the shorthand code and it looked really good and I put a enquiry in on pricing (no mention on pricing at any stage before your site is complete). Guess how much? $3000 per year! They should at least hint at the price beforehand. Back to the drawing board. Share this post Link to post Share on other sites Share this content via...
swarfendor437   14 #7 Posted November 22, 2017 Serif have discontinued WebPlus product line but you can still get WebPlus 8 via Currys:  https://www.currys.co.uk/gbuk/computing-accessories/software/creation-and-editing-software/serif-webplus-x8-10138868-pdt.html  With this software you can create gallaeries, roll-over popups, thumbnails of photos etc.  It is what I used to create my website. Share this post Link to post Share on other sites Share this content via...