Tag Archives: Geeky

WordPress Custom CSS

Finally decided to un-dust my humble site and give WordPress a try. Definitely go for the likes of Basekit to create a website, but if you feel like a coding challenge, WordPress seems offers a few cool things

Below some Custom CSS I had to craft to make TwentyFourteen look a bit better (to my personal preferences, of course). Feel free to use any part of it.

Note/Disclosure: I used to be Head of Marketing for Basekit

/* Hide links undeneath the post's title */
.entry-author-link
.entry-permalink,
.entry-date,
.entry-meta {
display: none;
}

/* Hide title on static pages, BUT keep it on posts*/
.page .entry-title {
display: none;
}

/* Define the width of the text on pages&posts, AND keep it centered*/
.full-width .site-content .entry-header,
.full-width .site-content .entry-content {
margin: 0 auto;
max-width: 80%;
}

/* Remove the powered by wordpress on footer*/
.site-info {
display: none;
}

/* Styling the comment sections to remove the ugly title*/
h3#reply-title {
display: none;
}

/* Styling the entries to remove the capitalisation */
.entry-title {
text-transform: none;
font-weight: bold;
}

/* Making the content slightly smaller so it loos better */
.entry-content {
font-size: 90%;
}

/* Remove underline text decoration for links*/
.entry-content a, .entry-summary a, .page-content a, .comment-content a {
text-decoration: none;
}

/* Underline when hovering over links */
.entry-content a:hover, .entry-summary a:hover, .page-content a:hover, .comment-content a:hover, .entry-content a.button, .entry-summary a.button, .page-content a.button, .comment-content a.button {
text-decoration: underline;
}

/* Decrease margin above headline, this looked weird on my site */
.content-area, .content-sidebar {
padding-top: 28px;
}

.widget .widget-title {
margin: 0 0 4px;
}

Google Docs – Handy Tools

Using Google SpreadSheets often? Install this Script to make repetitive tasks quicker

Handy Tools

A “Handy Tools” menu will be added to your Menu (as per image above)

//Just a few handy scripts to make Google SpreadSheets nicer to work with. JaimeJCandau
// Add a custom menu to an spreadsheet when it opens
function onOpen(e) {
SpreadsheetApp.getUi()
.createMenu('HandyTools')
.addItem('Hide Empty Rows', 'hideEmptyRows')
.addItem('Show All Rows', 'showAllRows')
.addItem('Make Top Row Heading', 'makeTopRowHeading')
.addItem('Zebra Selected Range', 'zebraColors')
.addToUi();
}

//Function to Hide All Empty Rows on the Active sheet JaimeJCandau
function hideEmptyRows(){
//Getting the active Sheet
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var range = sheet.getRange(1, 1, sheet.getLastRow());

//Hide the Empty Rows in Column A from that sheet
var values = range.getValues();
//Reading row by row
for (var i=0; i<values.length; i++){
//IF Row value is Empty
if(values[i][0] === ""){
//THEN hide row
sheet.hideRows(i+1);
}
}
}

//Funciont ShowAllRows: UnHides all rows on the active sheet JaimeJCandau
function showAllRows(){
//Getting the active Sheet
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var range = sheet.getRange(1, 1, sheet.getLastRow());

//UnHide rows
sheet.showRows(1,sheet.getLastRow());
}

//Function MakeTopRowHeading: Set the top row as Black and White Font, handy for reports, etc... JaimeJCandau
function makeTopRowHeading(){
//Getting the Range
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var range = sheet.getRange("1:1");
range.activate();

//Applying the new format
range.setBackground("black");
range.setFontColor("white");
range.setFontWeight("bold");
range.setVerticalAlignment("middle");
range.setWrap(true);
sheet.setFrozenRows(1);
sheet.setRowHeight(1, 40);
range.setHorizontalAlignment("center");
}

//Zebra coloring the selected range
function zebraColors() {
//Getting the range
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var range = sheet.getRange("1:1");
range.activate();
var totalRows = SpreadsheetApp.getActiveRange().getNumRows();
var totalColumns = SpreadsheetApp.getActiveRange().getNumColumns();
var startRow = SpreadsheetApp.getActiveRange().getRow();
var startColumn = SpreadsheetApp.getActiveRange().getColumn();
var row = startRow;
//Recurring looking at range to define color
while (row < totalRows+startRow)
{
var column = startColumn
while (column < totalColumns+startColumn){
if(row%2 == 0){
sheet.getRange(row, column).setBackgroundColor("lightgrey"); //Change the color here, you can also use HEX codes
}
column++;
}
row++;
}
}

Pd – These are the ones I use frequently, if there is anything else you could think off, leave and comment, and I’ll add (provided my limited coding skills allow!!!!)

Quick Hack to host images

Personally, I would not use this extensively, but comes handy for the odd image/icon you need to host somewhere

e.g. Hosting a little BAG logo for a customised signature (such as the one underneath my picture on the left nav bag of this site)

 BAGmovies
  • Save the image in Google Drive (a png file tends to work fine everywhere)
  • Find the Folder ID on Google Drive

Hosting images on Google Drive

  • Build a Hosting URL concatenating:
    • https://googledrive.com/host/
    • The folder ID on Google Drive + /
    • The file name (better name it with extension, so it’s easy to locate later)