PHP REDUX
Short and sweet… So, we lost our updates/phpbb mods… (( POOOF )) PHPBB was miraculously turned back to it’s former self (Base/Prosilver theme). Lost the design, lost the skin mods, GA/GA plugin id; everything but the base code, base skins, base php code and add-in plugins. We can go over the plug in fiasco another day, anonymous aliens throw me for a loop enough for one day. In fact, I thought ‘aliens’ truly invaded the admin panel over… “Anonymous” came home to roost. Pictures above, this will make sense in due time. Anyway, 5/3, site vanished… We will continue to provide feedback and comments over on the board, find us here. Don’t forget to become a member!
We pick up the story in the PHPBB Admin Maintenance Area => Admin Logs; systems log shows “Anonymous” – username, [blank] User IP, Mon May 03, 2021 4:54am – Updated Database from version 3.3.3 to version 3.3.4. I guess this is where I thought aliens really do exist? No ip address for 5 entries… ((WHAM)) Not really aliens, just that it dawned on me updates rewrite skins and mods directly in the root directory. LAME. By the way, we still need to find away to add our changes to the Styles section, makes no sense. Maybe time to hack a skin mod of our own. Short term goal, reduce ‘anonymous’ alien interactions and auto-code deployments. Again, I want to reiterate this… the code (( POOF )) gone. Ironically enough, we didn’t have the pleasure of a rewrite as we were hacked, phished and spammed into oblivion only a few months back. Another day, perhaps.
Moving along, spent sometime online/interwebs, ‘relearn process initiated’. Found a few articles, on stylesheet manipulation and cracked open Firefox with Dev Tools… and off we went. Side by side, the hack job began. Inspect, mod and push… inspect, mod and push. 25 or so mods later, 2 style sheets specifically colours.css and common.css. We can start with the logo, place/push your logo to the root directory/styles/***placeholder**/theme/images; replace ***placeholder** with the appropriate theme folder/name you phpbb site has been ‘skinned’ in. Side note, we touch on this more below, direct the browser to the logo on the colours.css file, should be the class=”site_logo” as shown below:
EXAMPLE REPLACE LOGO IN COLOURS.CSS* replace placeholderImgFile.png with your logo
/** Updated **********/
.site_logo {
background-image: url(“./images/placeholderImgFile.png”);
}
/** Updated **********/
Make sense? I’ll stop there, FTP/SFTP access (file access provided by your hosting service provider) is required. Note, FTP (File Transfer Protocol) and Text Pad/Editor:
- FTP – Putty, Cyberduck, Filezilla
- Text Editor – Sublime Text, GNU, ATOM, Native Text Pad/Editor
Regardless of choice or combinations, both are required to pull down, modify and push changes. Unless you choose to use the built in editors within CPanel. We don’t recommend this, but you got to do what you got to do. We use Cyberduck, CPanel File/Folder Viewer (hosting view) and Sublime Text with projects plugin. Again, caveat here, If you don’t have either one of these, you need to hop on the ole’ horn or Youtube for directions and figure out who has the information and request access. Tangent there, now back to the show…
2 Stylesheets colours.css and common.css; we start with the comments, future forward comments. We like to place comments in and around the styles we edit on the CSS (Cascading Style Sheets) files, especially when modifying the files. Also, while we are hacking away at core files, you may want to quickly snag a back up of those two files and store the files in a safe area… We DON’T as you can tell, but probably should. That’s our lesson learned for the day. I’m not going to go in great detail here, however, comments in CSS are /* */ forward slashes and asterisks; both are required to open and close the comment. The browser will ignore all within the comment unless both elements are included. Multi-line comments are similar, you will see we add multi-lined asterisk stars for visual effect… same for the additional asterisks between a description of the ‘modification’ and open and close comment tags. Example – /** Updated **********/ Furthermore, we will start working down the CSS/Stylesheet on each id/class requiring change. One screen, Firefox Dev Tools => Inspect, other modifying css file. If you don’t know CSS by now, good luck… we all start somewhere! Today is the day you learn… we counted some ~20 changes with a few, minor inner class changes via colours.css, plus the 4 or so on the common.css file. Of course, we took the minimal change approach… we lost a lot of work on 5/3/21, more than what we put back into this re-skining effort.Finally, we will continue to add/modify said files as we get back up to speed. Also, we have this article for future help and support.
We will end with ‘The Good, The Bad and The Ugly’, un-minify here => https://duckduckgo.com/?q=minify+css&t=ffab&ia=answer.
<-------------------- COLOURS.CSS -----------------------
16 changes
———————- COLOURS.CSS ———————- >
1. Updating the background,body,with a smoke grey/black with a graphing paper textile html{background-color:transparent;background:#131321;background-image:linear-gradient(rgba(0, 255, 255, .1) .1em, transparent .01em), linear-gradient( 90deg , rgba(0, 255, 255, .1) .1em, transparent .01em);background-size:0.75em 0.75em}2.(a/b) Changing colors of the link and hover action on the link a{color:#ff6d31}a:hover{opacity:0.8}3. Next we have the wrap and div/class box elements Style Removed .wrap{}.forumbg,4. Style Removed .headerbar{}5. Color change .forabg{background-color:#247980}6. Color change .navbar{background-color:#247980}7. Color change .panel{background-color:#247980;color:#28313F}8. (A/B) Color and Opacity change .bg1{background-color:#2479;opacity:0.8}.bg2{background-color:#247980;opacity:0.8}9. Update Site Logo/Image .site_logo{background-image:url(“./images/fileName.png”)}10. Changed background color ul.forums{background-color:#1111}11. Commented out color,I want to keep this for future usage ul.topiclist li{}12. Change color and opacity li.row:hover{background-color:#Ffff;opacity:0.8}13. Color Change .content{color:#fff}14. Color and border updates .signature{border-top-color:#CCCCCC;color:#fff}15. Color Change .pagination{color:#fff}16. (A/B) Color and border changes,improve visibility .postprofile{color:#ff6d31;border-color:#FFFFFF}.postprofile strong{color:#fff}
<---------------------- COLOURS.CSS ---------------------- >
<-------------------- COMMON.CSS --------------------------
4 changes
———————- COMMON.CSS ————————- >
2. Color and margin change p{line-height:1.3em;font-size:1.1em;margin-bottom:1.5em;color:#ff6d31}2. Reduced logo spacing .logo{float:left;width:auto;padding:12px 3px 0 10px}3. Changed size,or space around where the new logo will live .site_logo{background-repeat:no-repeat;display:inline-block;width:33px;height:33px}4. Reduced width and padding to tighten up logo,h1 and site description,so it feels like one element .site-description{float:left;width:65%;padding:1em}
<---------------------- COMMON.CSS ---------------------->
As usual leave a comment below, let us know what you’re thinking?
